word-break within words

Question

I have this html

<div class="externalWidth">
    <div class="container">
        <div class="element">this_is_a_really_long_text_without_spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

<div class="externalWidth">
    <div class="container">
        <div class="element ">this is a really long text without spaces</div>
        <div class="element noWrap">:-)</div>
    </div>
</div>

and this css

.externalWidth { width: 200px; }
.container { margin-bottom:10px; display:inline-table; height:40px; width:100%; }
.element { display:table-cell; }
.noWrap { white-space:nowrap; }

I have made an jsfiddle to demonstrate it. The texts in both .elements are read from a server and bound via knockout. I want this to look as follows:

• the second .element should have as much space as it needs
• the first .elementshould have the remaining space. It should break into multiple lines if possible.

Everything works fine but long words causes the whole table to expand. Is it possible to break within words if necessary?

I've also tried table-layout:fixed; but that made two 100px colums.

Edit: Thanks. word-break: break-all; did exactly what I needed.

Answer 1

Use CSS word-break Property

try this DEMO