Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
Summary
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 |
Animatable | no |
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
p { width: 13em; background: gold; }
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)
p { width: 13em; background: gold; overflow-wrap: break-word; }
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Level 3 The definition of 'overflow-wrap' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support (as word-wrap ) |
3.5 (1.9.1) | 1.0 | 5.5 | 10.5 | 1.0 |
overflow-wrap |
49 (49) | (Yes) | ? | (Yes) | ? |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support (as word-wrap ) |
1.0 (1.9.1) | 1.0 | ? | ? | 1.0 |
overflow-wrap |
49 (49) | (Yes) | ? | (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:
PhiLho,
krixian,
teoli,
Thibaut,
cvrebert,
Sebastianz,
fscholz,
wbamberg,
jsx,
paddingme,
Chealer,
LouisLazaris,
Nickolay,
kscarfone,
Sheppy,
mattbrundage,
ethertank,
FredB,
dynamis,
mkato,
Jürgen Jeka,
Michael Ryan
Last updated by:
PhiLho,