What Is text-wrap: balance? Even Line Breaks for Headings
Use it on short text — long body copy has a performance cost
In web typography, having only one word on the last line of headings or short text blocks looks visually unbalanced. Applying text-wrap: balance makes the browser automatically adjust line break positions so each line has similar length.
It's particularly effective for short text like headings, quotes, and captions, but may have performance costs for long body text.
How to Apply
1
Apply text-wrap: balance to heading elements (h1-h6)
2
Apply to short text blocks like quotes and captions
3
Use only for headings and short text, not long body text
4
Also test text-wrap: pretty as needed
Pros
- ✓ Significantly improve typography quality with one line of CSS
- ✓ Automatically applied in responsive layouts with no maintenance needed
Cons
- ✗ May have performance issues for text longer than 6 lines
- ✗ Line lengths may be adjusted differently than intended
Use Cases
Improving article heading typography on news sites and blogs
Balancing large title text in hero sections