word-break property
Specifies line-breaking behavior within words, particularly where multiple languages appear in the object.
  |
Syntax
word-break: normal | break-all | keep-all
Property values
normal-
Default. Allows line breaking within words.
break-all-
Behaves as normal for CJK text, yet allows the line to break arbitrarily for non-CJK text. This value is suited to CJK text that contains small amounts of non-CJK text.
keep-all-
Behaves as normal for non-CJK text, but disallows word breaking for CJK text. This value is suited to non-CJK text that includes small amounts of CJK text.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value | normal |
Standards information
Remarks
Windows Internet Explorer 8. The -ms-word-break attribute is an extension to CSS, and can be used as a synonym for word-break in IE8 Standards mode.
When using the -ms-word-break attribute with a table, you must set the table-layout attribute to fixed on the table.
The behaviors of the parameter values are detailed in CSS Text Level 3: W3C Working Draft (6 March 2007), sec. 4.1, "Line Breaking Restrictions: The 'word-break' Property"; and in Unicode Standard Annex #14: Line Breaking Properties.
Examples
The following example shows three div objects that each contain a paragraph of text.
<div class="normal"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div class="break-all"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div class="keep-all"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div>
In the first div object, word-break is set to the initial value, normal. This allows the text to break normally. In the second div object, word-break is set to break-all. This allows CJK text to behave as normal but allows the line to break arbitrarily for non-CJK text. In the last div object, word-break is set to keep-all. Because the text in the paragraph is non-CJK text, it behaves as normal.
div {
background-color: #B0C4DE;
width: 200px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
The following image shows the result:
See also