CODEWITHSUNDEEP
htmlcss
Andreas
Andreas

Reputation: 502

word-break within words

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:

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.

Upvotes: 5

Views: 532

Answers (4)

marcus erronius
marcus erronius

Reputation: 3693

To add a pre-process option, you could use the html tag <wbr/>, the word break. It does the same thing as the soft hyphen (&shy;), but without adding an unsightly hyphen when it breaks :) here's a forked fiddle for you.

Just insert the tags after every underscore. In javascript:

str.replace(/_/, "_<wbr>");

Upvotes: 1

yunzen
yunzen

Reputation: 33439

word-wrap: break-word;
word-break: break-all;

Upvotes: 1

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

Use CSS word-break Property

try this DEMO

Upvotes: 4

mkoistinen
mkoistinen

Reputation: 7773

You could "pre-process" your content (on the server or in JS if you can't do this on the server) to inject a soft-hyphen into very long words. &shy; is the entity to use, and this will allow modern browsers to break at the soft-hyphen as required, but when it is not required, there won't be a visible gap in the letters.

Upvotes: 1

Related Questions