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

wrap (default)

balance

pretty

stable

CSS
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 only apply it to a handful of lines (around six in Chromium, ten in Firefox) because balancing is expensive, so putting it on body text does nothing useful and costs layout time.

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.