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.
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
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
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) | No support | ? | (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) | No support | ? | (Yes) | ? |
word-wrap:break-word
can be used to work around lack ofpre{white-space:pre-wrap}
support in IE 5.5-7. Seewhite-space
for an example.- IE8 introduced
-ms-word-wrap
as a synonym forword-wrap
. Don't use the-ms-
prefix.
See also
- Microsoft's original documentation: MSDN Microsoft library word-wrap
word-break
Document Tags and Contributors
Tags:
Contributors to this page:
wbamberg,
mfluehr,
arronei,
xrtariq2594,
erikadoyle,
PhiLho,
krixian,
teoli,
Thibaut,
cvrebert,
Sebastianz,
fscholz,
jsx,
paddingme,
Chealer,
LouisLazaris,
Nickolay,
kscarfone,
Sheppy,
mattbrundage,
ethertank,
FredB,
dynamis,
mkato,
Jürgen Jeka,
Michael Ryan
Last updated by:
wbamberg,