overflow-wrap

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

Initial valuenormal
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The overflow-wrap property is specified as a single keyword chosen from the list of values below.

Values

normal
Lines may only break at normal word break points (such as a space between two words).
break-word
To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Formal syntax

normal | break-word

Examples

CSS

.normal {
  width: 13em;
  background: gold;
}
.break-word {
  width: 13em;
  background: lime;
  overflow-wrap: break-word;
}

HTML

<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des
  Fernstraßenbauprivatfinanzierungsgesetzes
  und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
  Fernstraßenbauprivatfinanzierungsgesetzes
  und straßenverkehrsrechtlicher Vorschriften)</p>

Result

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'overflow-wrap' in that specification.
Working Draft Initial definition

Browser compatibility

     
Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support (as word-wrap) 3.5 (1.9.1) 1.0 (Yes) 5.5 10.5 1.0
overflow-wrap 49 (49) (Yes) No support ? (Yes) ?
     
Feature Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
Basic support (as word-wrap) 1.0 (1.9.1) 1.0 (Yes) ? ? 1.0
overflow-wrap 49 (49) (Yes) No support ? (Yes) ?
  • word-wrap:break-word can be used to work around lack of pre{white-space:pre-wrap} support in IE 5.5-7. See white-space for an example.
  • IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the -ms- prefix.

See also

Document Tags and Contributors

 Last updated by: wbamberg,