 <p>It seems you want the behavior of</p> <pre class="lang-css prettyprint-override"><code>word-break: break-word; </code></pre> <p>It is a non-standard property supported by Chrome which behaves almost like <code>word-wrap: break-word</code>. However, when <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=492202" rel="nofollow">they tried to remove it</a>, they noticed</p> <blockquote> <p>In some cases (tables and <code>display: table;</code> layouts) the <code>word-break: break-word</code> behavior is different from <code>word-wrap: break-word;</code> and the former works as expected.</p> </blockquote> <p>The CSS WG <a href="https://lists.w3.org/Archives/Public/www-style/2016Mar/0352.html" rel="nofollow">resolved</a> to</p> <blockquote> <p>Add <code>word-break: break-word</code> to spec if Edge/Firefox find it critical enough to Web compat to implement it.</p> </blockquote> <p>So it may become standard.</p> <hr> <p>But currently, if you want to prevent table cells from being at least as wide as the longest word, and still avoid breaking inside words when it's not necessary, you can use</p> <pre class="lang-css prettyprint-override"><code>table-layout: fixed; </code></pre> <p>Note this will get rid of some special table behaviors, e.g. all columns will be equally wide even if their contents could fit better in other arrangements.</p>