Note that there are some explanatory texts on larger screens.

plurals
  1. POword-break within words
    primarykey
    data
    text
    <p>I have this html</p> <pre><code>&lt;div class="externalWidth"&gt; &lt;div class="container"&gt; &lt;div class="element"&gt;this_is_a_really_long_text_without_spaces&lt;/div&gt; &lt;div class="element noWrap"&gt;:-)&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="externalWidth"&gt; &lt;div class="container"&gt; &lt;div class="element "&gt;this is a really long text without spaces&lt;/div&gt; &lt;div class="element noWrap"&gt;:-)&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and this css</p> <pre><code>.externalWidth { width: 200px; } .container { margin-bottom:10px; display:inline-table; height:40px; width:100%; } .element { display:table-cell; } .noWrap { white-space:nowrap; } </code></pre> <p>I have made an <a href="http://jsfiddle.net/gurumusch/XUqSU/6/" rel="nofollow">jsfiddle</a> to demonstrate it. The texts in both <code>.element</code>s are read from a server and bound via <a href="http://knockoutjs.com/" rel="nofollow">knockout</a>. I want this to look as follows:</p> <ul> <li>the second <code>.element</code> should have as much space as it needs</li> <li>the first <code>.element</code>should have the remaining space. It should break into multiple lines if possible.</li> </ul> <p>Everything works fine but long words causes the whole table to expand. Is it possible to break within words if necessary?</p> <p>I've also tried <code>table-layout:fixed;</code> but that made two <code>100px</code> colums.</p> <p>Edit: Thanks. <code>word-break: break-all;</code> did exactly what I needed.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload