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.
Code Comparison
✕ Old
8 lines
1/* HTML: manual <br> or wrapper for JS */
2h1 {
3 text-align: center;
4 max-width: 40ch;
5 /* Balance-Text.js: script + init */
6 /* or insert <br> in CMS/HTML */
7}
2h1 {
3 text-align: center;
4 max-width: 40ch;
5 /* Balance-Text.js: script + init */
6 /* or insert <br> in CMS/HTML */
7}
✓ Modern
4 lines
1h1, h2 {
2 text-wrap: balance;
3 max-width: 40ch;
4}
2 text-wrap: balance;
3 max-width: 40ch;
4}
Why the modern way wins
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.
Browser Support
90%
Lines Saved
7 → 4
No JS, no br
Old Approach
Manual br or JS lib
Balance-Text, CMS hacks
Modern Approach
One property
Native text-wrap: balance
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.