Balanced headlines without manual line breaks
You used to add br tags by hand or pull in Balance-Text.js. Now one property evens out lines so headlines don't end with a single word.
2 text-wrap: balance;
3 max-width: 40ch;
4}
2h1 {
3 text-align: center;
4 max-width: 40ch;
5 /* Balance-Text.js: script + init */
6 /* or insert <br> in CMS/HTML */
7}
Browser Support for text-wrap: balance
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
No scripts
Drop Balance-Text or any JS. The browser balances lines natively.
No manual br tags
Works with any content width. No CMS hacks or hand-placed line breaks.
Performance
Layout happens in the engine. No DOM reads or resize observers.
How it works
Headlines often wrapped with one word on the last line. The old fix was either manual <br> tags (brittle when copy changes) or a script like Balance-Text that measured and reflowed after paint.
text-wrap: balance tells the browser to prefer more even line lengths. It works best on short blocks (a few lines). No script, no DOM access, just layout.