Two CSS Words That Fix Ugly Headlines: text-wrap

You ship a clean hero section, then a heading wraps so the last line is a single sad word. The usual "fix" is a hardcoded <br> or a non-breaking space — which breaks the moment the text changes or the viewport shrinks. There is a real fix now, and it is two CSS values most devs still don't reach for.

balance: for short text like headings

text-wrap: balance tells the browser to even out the number of characters across every line, so a two-line heading splits roughly in half instead of dumping one orphan on line two.

h1, h2, h3, .card-title {
  text-wrap: balance;
}

That is the whole fix. No JS, no magic break points, no re-tuning when marketing changes the copy. One caveat: the algorithm only runs on blocks up to a handful of lines (browsers cap it around six) because balancing is more expensive than normal wrapping. That cap is exactly why it belongs on headings and short callouts — not body paragraphs.

pretty: for body copy

For long text you want a different goal: never leave a single word alone on the last line. That is text-wrap: pretty. It keeps normal greedy wrapping for speed but fixes the final lines so paragraphs don't end on an orphan.

p, li, figcaption {
  text-wrap: pretty;
}

Think of it as the rule of thumb: balance for titles, pretty for paragraphs. Reaching for balance on long articles just wastes the browser's time and hits the line cap anyway.

Wire it up once, globally

I set this in my base layer so every project gets it without thinking:

@layer base {
  :is(h1, h2, h3, h4, blockquote) {
    text-wrap: balance;
  }
  :is(p, li, dd) {
    text-wrap: pretty;
  }
}

Because it is plain CSS with graceful degradation, browsers that don't support it just fall back to normal wrapping — nothing breaks, you only lose the polish. That makes it a zero-risk addition to any design system, including the e-commerce themes I build on Salla and Zid where product titles wrap unpredictably across thousands of items.

The takeaway

Delete your manual <br> tags in headings and add two lines to your base stylesheet. text-wrap: balance for titles, text-wrap: pretty for prose. You get typographically correct wrapping that survives copy changes, translation, and every screen size — for free.