| home / programming / corecss / 2 |    [previous] [next] |
|
|
|
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">はフラットパネルディスプレイ業界の独立したポータルサイトで、電子取引サービスを行っております。</span>
</div>
<hr />
word-break: break-all
<div style="word-break: break-all">
<span class="english">PanelX</span>
<span class="japanese">はフラットパネルディスプレイ業界の独立したポータルサイトで、電子取引サービスを行っております。</span>
</div>
<hr />
word-break: keep-all
<div style="word-break: keep-all">
<span class="english">PanelX</span>
<span class="japanese">&#12399;&#12501;&#12521;&#12483;&#12488;&#12497;&#12493;&#12523;ディスプレイ業界の独立したポータルサイトで、電子取引サービスを行っております。</span>
</div>
</body>
</html>
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.
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".
| home / programming / corecss / 2 | [previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 27, 2003
Revised: August 19, 2003
URL: http://webreference.com/programming/corecss/2
