Text Wrapping

Browsers wrap text greedily: fill a line, break, repeat. That's fast, but it produces two classic eyesores — headlines where the last line holds a single short word, and paragraphs ending in a lonely orphan.

CSS now has two purpose-built fixes. Resize the container below and compare.

normalbalancepretty

Headlines wrap into awkward orphans without a little help

Balance equalizes line lengths, which suits headings. Pretty avoids a lonely last word, which suits paragraphs of body text like this one.

container width

text-balance

text-wrap: balance makes all lines of a block roughly the same length. It's designed for short runs of text — headings, blurbs, toasts. Browsers only balance blocks up to a handful of lines (Chromium: 6), so don't reach for it on body copy.

h1, h2, h3, blockquote {
  text-wrap: balance;
}

text-pretty

text-wrap: pretty keeps greedy wrapping but looks ahead to avoid bad endings — most visibly the single-word last line. It's cheap enough to apply to paragraphs by default.

p {
  text-wrap: pretty;
}

In Tailwind these are text-balance and text-pretty. This site applies text-balance to titles and text-pretty to descriptions and body text.