Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

word-break property

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

CSS Text Level 3, Section 5.2

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

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

 

 

Show:
© 2014 Microsoft