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;

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

p {
  width: 13em;
  padding: 0.5em;
  font-size: 1.2em;
}
code {
  marg: 1em;
}
.normal {
  overflow-wrap: normal;
  background: gold;
}
.break-word {
  background: orange;
  overflow-wrap: break-word;
}

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.

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

Browser compatibility

• 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

• Microsoft's original documentation: MSDN Microsoft library word-wrap
• word-break