Type and forms
text-wrap: balance
Newly availablesince May 2024
Replaces: Manual line breaks and max-width guesses to stop a headline ending on one orphaned word. The browser balances the lines.
See it working
A headline that is just long enough to leave one word alone
A headline that is just long enough to leave one word alone
The syntax
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }Edit the demo’s CSS
This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.
For browsers without it
None needed. A browser without it wraps the old way, and the orphan comes back. Add it to every heading today: it costs one line and cannot hurt.
Before you ship it
Only a few lines are balanced
Browsers cap how many lines this property will touch, which is why it costs almost nothing on a headline and does nothing useful on a paragraph. MDN gives no single number: treat it as short text only. Source
nowrap cancels it
If text-wrap-mode is nowrap, balance and pretty have nothing to do and are ignored. Check the shorthand you inherited before blaming support. Source