W3cubDocs

/CSS

overflow-wrap

The overflow-wrap CSS property sets whether the browser should insert line breaks within words to prevent text from overflowing its content box.

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.

Syntax

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

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

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

Example

This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.

HTML

<p class="normal">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>normal</code>)</p>
<p class="overflow-wrap">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>overflow-wrap</code>)</p>
<p class="word-break">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p class="hyphens">They say the fishing is excellent at 
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, 
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p class="hyphens" lang="en">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, German rules)</p>

CSS

p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

Result

Specifications

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

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

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes Yes 1 Uses the non-standard name: `word-wrap`	18 18 12 Uses the non-standard name: `word-wrap`	49 49 3.5 Uses the non-standard name: `word-wrap`	5.5 5.5 Uses the non-standard name: `word-wrap`	Yes Yes 10.5 Uses the non-standard name: `word-wrap`	Yes Yes 1 Uses the non-standard name: `word-wrap`

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes Yes 1 Uses the non-standard name: `word-wrap`	?	Yes Yes Uses the non-standard name: `word-wrap`	49 49 4 Uses the non-standard name: `word-wrap`	Yes	Yes Yes 1 Uses the non-standard name: `word-wrap`	?