The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Last Call Working Draft


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


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


Default property. Words break according to their usual rules.

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.

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.


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">

<p>This example using keep-all will break where there are hyphens.</p>
<div class="keep-all">

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



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.


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

Standards information

Related specifications

Specification Status Related Changes
CSS Text Module Level 3 W3C Last Call Working Draft


This article contains content originally from external sources.

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