W3cubDocs

/CSS

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.

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

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

Note: 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.

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

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

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>

CSS

.normal {
  width: 13em;
  background: gold;
}

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

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 Chrome Edge Firefox Internet Explorer Opera Safari
Basic support

Yes

11

No

Yes1

49

3.51

5.51

Yes

10.51

Yes

11

Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support

Yes

11

?

No

Yes1

49

41

Yes

Yes

11

?

1. Supported as word-wrap.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap