W3cubDocs

/CSS

overflow-wrap

The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

Note: Originally a Microsoft (unprefixed) proprietary extension called word-wrap, and implemented by most browsers, it has been renamed to overflow-wrap. The original name word-wrap is now considered an "alternate name" for overflow-wrap.

Initial value	`normal`
Applies to	all elements
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Values

normal: Indicates that lines may only break at normal word break points.
break-word: Indicates that 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;
}
.breakWord {
  width: 13em;
  background: gold;
  overflow-wrap: break-word;
}

HTML

<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="breakWord">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)	?	?	(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)	?	?	(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.