word-break

Jump to: navigation, search

word-break

This page has been flagged with the following issues:

High-level issues:


W3C Working Draft

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

Syntax

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


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

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

HTML

<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

CSS

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;
}

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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 22.0
15.0
8.0
Unsupported
5.1

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.1
7.0
?
?
?
Unsupported
?
3.2

See also

Related articles

Text


















































… further results

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]