CSS text-wrap balance and pretty

The problem with default wrapping

Browsers wrap text with a fast line-breaking algorithm that fills each line greedily and moves on. It is fast, but it produces two ugly outcomes: a wide heading where the last line holds a single short word, and a paragraph whose final line is swallowed by a one-word or two-word orphan. Fixing those by hand meant reworking copy or adding <br> tags, which are brittle. The CSS text-wrap property gives the browser two quality-oriented wrapping modes instead.

text-wrap has shipped widely and is safe to use as a progressive enhancement: the value balance targets short blocks, and pretty targets longer paragraphs.

Balance short headings

Apply balance to headings, captions and quotes, the short text blocks where a ragged tail is most visible:

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

When the value is supported, the browser computes the wrapping that equalises the character counts across the lines, so a two-line or three-line heading stops ending in a lone word. Because the algorithm balances only a small number of lines, the cost is negligible on the short text where you use it. The clamp fluid typography article pairs well with this, since balanced wrapping keeps scaling headlines tidy as their width changes.

Pretty for paragraphs

For body copy the goal is different: you want to eliminate orphans and keep a consistent, high-quality line count, not balance every line. text-wrap: pretty chooses layouts that reduce one-word final lines:

article p {
  text-wrap: pretty;
}

pretty uses a slower, higher-quality algorithm that favours good breaks over speed, so it is meant for longer paragraphs where appearance matters more than raw render cost. The rem vs em units article is a useful pairing when you are also reasoning about font sizing that affects how those line breaks land.

Respect the line limits

The two values come with practical limits. balance only takes effect on blocks of roughly six lines in Chromium and about ten in Firefox; beyond that it falls back to normal wrapping, so it is wasted effort on a ten-paragraph article body. pretty has no line-count ceiling but does have a render cost, so reserve it for real body copy and do not spray it across every element. Both are progressive enhancements: browsers that do not support the value simply keep default wrapping, so you can ship the declarations without a fallback risk. If a resize or a font swap on another element is producing odd breaks, the HTML/CSS/JS troubleshooting order article walks through isolating which layout change caused it.