third_party/WebKit/LayoutTests/fast/text/word-break.html

This example tests that word-break properly shrinks a cell to one character per line when it is set to break-all.

<table style="font-family: monospace" width=100% border=1 cellpadding=5 cellspacing=0>
<tr><td style="word-break: break-all">Narrow<td width=100%>This cell should grow
</table>

<br>

This test checks that word-break is ignored when white-space is pre.

<pre style="width:100px; border:5px solid black; word-break: break-all">
Thislongwordshouldnotgetbrokenbutshouldstickoutofthepre.
</pre>

<br>

The next two examples test our custom break-word value for word-break.  We should get the same results as
break-all for the first test, but we should break up the word in the second test (since our behavior matches
word-wrap: break-word in that case).

<table style="font-family: monospace" width=100% border=1 cellpadding=5 cellspacing=0>
<tr><td style="word-break: break-word">Narrow<td width=100%>This cell should grow
</table>

<br>

<pre style="width:100px; border:5px solid black; word-break: break-word">
Thislongwordshouldnotgetbrokenbutshouldstickoutofthepre.
</pre>

<br>

This test makes sure floating and positioned elements do the right thing with word-break: break-all.  The minimum width
should be less than the containing block width.  The breaking should be "dumb" and just occur when the end of the line is hit.

<div style="width:300px; border:2px solid black; font-family: monospace; word-break: break-all">
<div style="float:left">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
<br clear="all">
</div>

<br>

<div style="width:300px; position:relative; border:2px solid black; font-family: monospace; word-break: break-all; height:100px">
<div style="position:absolute">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
</div>

<br>

This test makes sure floating and positioned elements do the right thing with word-break: break-word.  The minimum width
should be less than the containing block width.  The breaking should be "smart" and be like word-wrap: break-word, with words
preferring to wrap first before allowing break opportunities within them.

<div style="width:300px; border:2px solid black; font-family: monospace; word-break: break-word">
<div style="float:left">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
<br clear="all">
</div>

<br>

<div style="width:300px; position:relative; border:2px solid black; font-family: monospace; word-break: break-word; height:100px">
<div style="position:absolute">Eventhoughthishasareallylongword itshouldnotstick out oftheenclosing300pxblock.</div>
</div>