overflow-wrap

You’re reading the English version of this content since no translation exists yet for this locale. Bu makaleyi çevirmemize yardım edin!

The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line 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;
overflow-wrap: anywhere;

/* 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).
anywhere
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
break-word
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Formal syntax

normal | break-word | anywhere

Example

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

HTML

<p>They say the fishing is excellent at
  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at 
  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, 
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p>They say the fishing is excellent at 
  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
  Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  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 <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, German rules)</p>

CSS

p {
   width: 13em;
   margin: 2px;
   background: gold;
}

.ow-anywhere { 
   overflow-wrap: anywhere; 
}

.ow-break-word {
   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 valuenormal
Applies tonon-replaced inline elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overflow-wrapChrome Full support 23
Full support 23
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Edge Full support 18
Full support 18
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Full support 49
Full support 49
Full support 3.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
IE Full support 5.5
Alternate Name
Full support 5.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Full support 12.1
Full support 12.1
Full support 10.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Safari Full support 6.1
Full support 6.1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
WebView Android Full support 4.4
Full support 4.4
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Chrome Android Full support 25
Full support 25
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Android Full support 49
Full support 49
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Android Full support 12.1
Full support 12.1
Full support 11
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Safari iOS Full support 7
Full support 7
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Samsung Internet Android Full support 4.0
anywhereChrome No support NoEdge No support NoFirefox Full support 65IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 65Opera Android ? Safari iOS No support NoSamsung Internet Android ?
break-wordChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 5.5Opera Full support 10.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

See also