Core CSS: 2nd Edition, from Prentice Hall. | 10

Core CSS: Chapter 11: Text Properties: Extensions

WORD-BREAK PROPERTY

The word-break property is designed to give the Web author control over how line-breaks should occur within words, especially in cases where the content is comprised of text from more than one language.

There are three values for this property: normal, break-all and keep-all. The normal value is the default, which allows line-breaking behavior within words. The break-all value works the same way as normal, but is intended for Asian characters, and yet is designed to allow any non-Asian characters to break as they normally might. The third, keep-all value is designed not to allow word breaks for Chinese, Japanese or Korean characters, though it works the same way as normal for any non-Asian language.

Listing 11-12 shows a combination of English and Chinese text, and does not use a vertical layout in order to more clearly show the effects of all of the word-break properties.

Listing 11-12 word-break Sample Code 

<html>
<head>
<title>word-break Example</title>
</head>
<style>
span.japanese {font-family:"MS Mincho"; font-size: 17pt}
span.english {font-family: arial; font-weight: bold; font-size: 17pt}
div {layout-grid-type: both; layout-grid-char:1pt; layout-grid-line:1pt}
</style>
<body>
word-break: normal
<div style="word-break: normal">
<span class="english">PanelX</span>
<span class="japanese">&#12399;&#12501;&#12521;&#12483;&#12488;&#12497;&#12493;&#12523;&#12487;&#12451;&#12473;&#12503;&#12524;&#12452;&#26989;&#30028;&#12398;&#29420;&#31435;&#12375;&#12383;&#12509;&#12540;&#12479;&#12523;&#12469;&#12452;&#12488;&#12391;&#12289;&#38651;&#23376;&#21462;&#24341;&#12469;&#12540;&#12499;&#12473;&#12434;&#34892;&#12387;&#12390;&#12362;&#12426;&#12414;&#12377;&#12290;</span>
</div>
<hr />
word-break: break-all
<div style="word-break: break-all">
<span class="english">PanelX</span>
<span class="japanese">&#12399;&#12501;&#12521;&#12483;&#12488;&#12497;&#12493;&#12523;&#12487;&#12451;&#12473;&#12503;&#12524;&#12452;&#26989;&#30028;&#12398;&#29420;&#31435;&#12375;&#12383;&#12509;&#12540;&#12479;&#12523;&#12469;&#12452;&#12488;&#12391;&#12289;&#38651;&#23376;&#21462;&#24341;&#12469;&#12540;&#12499;&#12473;&#12434;&#34892;&#12387;&#12390;&#12362;&#12426;&#12414;&#12377;&#12290;</span>
</div>
<hr />
word-break: keep-all
<div style="word-break: keep-all">
<span class="english">PanelX</span>
<span class="japanese">&amp;#12399;&amp;#12501;&amp;#12521;&amp;#12483;&amp;#12488;&amp;#12497;&amp;#12493;&amp;#12523;&#12487;&#12451;&#12473;&#12503;&#12524;&#12452;&#26989;&#30028;&#12398;&#29420;&#31435;&#12375;&#12383;&#12509;&#12540;&#12479;&#12523;&#12469;&#12452;&#12488;&#12391;&#12289;&#38651;&#23376;&#21462;&#24341;&#12469;&#12540;&#12499;&#12473;&#12434;&#34892;&#12387;&#12390;&#12362;&#12426;&#12414;&#12377;&#12290;</span>
</div>
</body>
</html>

Figure 11-13: The values of word-break used with the same English/Chinese text, viewed in Internet Explorer.

There is no discernable difference between the effects of the normal and break-all values as seen in Figure 11-13. However, it does show the difference the keep-all value makes to the same piece of text: not only is the English text "PanelX" isolated on its line, but the subsequent Chinese text breaks only at the comma on the second line of text. Be careful using the keep-all value, as a long line of unpunctuated Asian text could cause the user to do a lot of scrolling to be able to read it fully.

CSS3 and word-break

The CSS3 text module word-break property has a few extra values over its current Internet Explorer counterpart. In the CSS3 text module, word-break is in fact a shortcut property for two other properties, called word-break-CJK and word-break-inside. The Internet Explorer work-break property is equivalent to the CSS3 property word-break-CJK (the "CJK" references the languages it is designed to work with: Chinese, Japanese and Korean), as it does not incorporate any of the values associated with word-break-inside.

For more information on these CSS3 text properties, see Chapter 10, "Text Properties".

Created: March 27, 2003
Revised: August 19, 2003

URL: http://webreference.com/programming/corecss/2