Tools
text-wrap Compared
One property fixes headlines that end on a lonely word and paragraphs that end on a short line. Type your own text, drag the width, and watch the four values disagree.
Newly availablesince May 2024Limited availability
h1, h2, h3, h4, blockquote, figcaption {
text-wrap: balance;
}
p, li, dd {
text-wrap: pretty;
}No fallback needed: a browser without it wraps the old way, and nothing breaks.
balance is for short text
balance makes every line about the same length. It is for headlines, captions and pull quotes.
Browsers cap how many lines they will balance, because balancing is expensive and the cost grows with the
line count. The cap is an implementation choice and no spec fixes it, so treat the property as something
for short text: on a paragraph it does nothing useful and still asks the engine to think about it.
pretty is for paragraphs
pretty leaves most lines alone and works on the ending: it avoids a last line of one short
word. It looks ahead a few lines to do it, so it is slower than the default and much cheaper than balance.
This is the one to put on p.
stable is for text people edit
With stable, typing at the end of a paragraph does not re-wrap the lines above the cursor. It
matters in editable regions, where lines jumping around while you type is the bug. Status for each value is on
the badges above, read from the browser dataset; see also the feature page.