Export (0) Print
Expand All
3 out of 7 rated this helpful - Rate this topic

word-break property

Specifies line-breaking behavior within words, particularly where multiple languages appear in the object.

CSS Text Level 3, Section 5.2Internet Explorer 9

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 ToAll elements
Mediavisual
Inherited1
Initial Valuenormal

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:

An image demonstrating the values for word-break

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.