text-wrap: balanceBaseline · Newly available
The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since May 13, 2024.
Browser support
DesktopChrome
1–113Not supported
114+Supportedsince May 30, 2023
Current: 155Edge
12–113Not supported
114+Supportedsince Jun 2, 2023
Current: 154Firefox
1–120Not supported
121+Supportedsince Dec 19, 2023
Current: 157Safari
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27MobileChrome Android
18–113Not supported
114+Supportedsince May 30, 2023
Current: 155Firefox Android
4–120Not supported
121+Supportedsince Dec 19, 2023
Current: 157Safari iOS
1–17.4Not supported
17.5+Supportedsince May 13, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on May 13, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
CSS
h1, h2, h3 {
text-wrap: balance; /* even line lengths for headings */
}
p {
text-wrap: pretty; /* avoid orphans in body text */
}Feature detection
CSS · check before using
@supports (text-wrap-style: balance) {
/* styles that rely on text-wrap-style: balance */
}
/* or in JavaScript */
if (CSS.supports("text-wrap-style", "balance")) {
// use it
}Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| text-wrap-style.balance | 130 | 130 | 124 | 17.5 | 130 | 124 | 17.5 |
| text-wrap.balance | 114 | 114 | 121 | 17.5 | 114 | 121 | 17.5 |