63 lines
2.6 KiB
HTML
63 lines
2.6 KiB
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>
|