overflow-wrapBaseline · Widely available
The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Oct 2, 2018. Widely available since Apr 2, 2021.
Browser support
DesktopChrome
1–22Not supported
23+Supportedsince Nov 6, 2012
Current: 155Edge
12–17Not supported
18+Supportedsince Oct 2, 2018
Current: 154Firefox
1–48Not supported
49+Supportedsince Sep 20, 2016
Current: 157Safari
1–6Not supported
7+Supportedsince Oct 22, 2013
Current: 27MobileChrome Android
18–18Not supported
25+Supportedsince Feb 27, 2013
Current: 155Firefox Android
4–48Not supported
49+Supportedsince Sep 20, 2016
Current: 157Safari iOS
1–6Not supported
7+Supportedsince Sep 18, 2013
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: overflow-wrap.
Feature detection
CSS · check before using
@supports (overflow-wrap: initial) {
/* styles that rely on overflow-wrap */
}
/* or in JavaScript */
if (CSS.supports("overflow-wrap", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| overflow-wrap | 23 | 18 | 49 | 7 | 25 | 49 | 7 |
| overflow-wrap.anywhere | 80 | 80 | 65 | 15.4 | 80 | 65 | 15.4 |
| overflow-wrap.break-word | 23 | 18 | 49 | 7 | 25 | 49 | 7 |
| overflow-wrap.normal | 23 | 18 | 49 | 7 | 25 | 49 | 7 |