word-break

Summary

The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element.

Overview table

Initial value: normal
Applies to: All elements
Inherited: Yes
Media: visual
Computed value: specified value
Animatable: No
CSS Object Model Property: wordBreak
Percentages: Not available

Syntax

word-break: break-all
word-break: keep-all
word-break: normal

Values

normal: Default property. Words break according to their usual rules.
break-all: In addition to normal soft wrap opportunities, lines may break between any two letters (except where forbidden by the line-break property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK (Chinese/Japanese/Korean) characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.
keep-all: Implicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (except where opportunities exist due to dictionary-based breaking). Otherwise this option is equivalent to normal. In this style, sequences of CJK characters do not break.

Examples

A simple example showing multiple <div>s, identical in style except that they have different word-break properties applied to them.

<p>This example using break-all will stay within the box border.</p>
<div class="break-all">
  http://www.exampleurl.com/this-is-a-long-url/it-will-not-break-at-hypens
</div>

<p>This example using keep-all will break where there are hyphens.</p>
<div class="keep-all">
  http://www.exampleurl.com/this-is-a-long-url/it-will-break-at-hypens
</div>

View live example

div {
  background: yellow;
  border: 1px solid #444;
  margin: 1em;
  padding: .5em;
  width: 200px;
  font-family: sans-serif;
}

.break-all {
  word-break: break-all;
}

.keep-all {
  word-break: keep-all;
}

View live example

Notes

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.

Syntax

word-break: normal | break-all | keep-all

Standards information

Related specifications

CSS Text Module Level 3: W3C Last Call Working Draft

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]