The Two-Word Fix for Ugly Headline Wrapping

You've shipped this bug. Everyone has. The heading looks great on your screen, then at some in-between viewport width it wraps like this:

Everything you need to build faster
websites

One orphaned word, dangling. Designers call the fix "balancing" and used to do it manually with <br> tags or non-breaking spaces - which of course breaks at the next viewport width. The CSS fix:

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

The browser now chooses line breaks so lines come out roughly equal:

Everything you need to
build faster websites

Recalculated at every size, no markup hacks, no JS measuring. It's the rare CSS property with zero API surface to learn - you turn it on and typography improves.

Know the limits (they're sensible)

• Balancing is expensive, so browsers cap it: Chromium balances only blocks up to 6 lines, Firefox up to 10. Headlines and captions - exactly the elements you want - fit comfortably. Body paragraphs are ignored, which is correct: don't apply it to article text and expect anything.
• It shortens the visual width of some headings (lines wrap earlier than they must). If a design depends on headlines filling their box edge-to-edge, check it.

The paragraph-grade sibling: text-wrap: pretty

p { text-wrap: pretty; }

pretty targets a different sin: the single short word orphaned on a paragraph's final line. The browser looks ahead and adjusts earlier breaks to avoid it. In Chromium this trades a little layout performance for nicer rag on the last few lines; Safari's implementation goes further and evaluates the whole paragraph. Either way it's designed to be safe on body text, where balance isn't.

Support and the graceful part

balance: Chrome 114+, Firefox 121+, Safari 17.5+. pretty: Chromium 117+, Safari 18.4+, and Firefox 139+. The graceful part is what makes this a no-brainer: unsupported browsers just wrap the old way. There is no failure mode, so there's nothing to feature-detect.

Two lines in the stylesheet, typographic polish everywhere, forever. For testing how your newly balanced headlines behave with different copy, designMode makes the whole page editable - type variations straight into the live layout.