This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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