🎮 text-wrap: balance — end the headline orphan

The default line-breaker fills each line greedily, so a headline near its container edge strands its last word alone. text-wrap: balance evens the lines out instead. Edit the text, drag the width, and watch both boxes re-break — the metrics are measured from the real rendered lines.

1 Your headline & its container width

Headline text

Container width

300px

2 Same headline, same width — two line-breakers

⚠️ This browser doesn't support text-wrap: balance, so both boxes below fall back to the default and look identical. Try the latest Chrome, Firefox, or Safari.

❌ Default (text-wrap: normal)

✅ text-wrap: balance

Adjust the width until the default box orphans its last word.

3 Body text is different — that's what text-wrap: pretty is for

balance would reshape every line of a long paragraph. pretty only touches the last few lines, pulling a stranded final word back up. Toggle it:

Apply text-wrap: pretty to the paragraph

Long-form paragraphs have their own orphan problem: a single word stranded on the last line looks unfinished. Turning on pretty asks the browser to look ahead and avoid it, without disturbing the rhythm of the lines above.

4 The whole fix, in two rules

Baseline 2024 — no JavaScript, no <br>, no ResizeObserver. Unsupported browsers just fall back to the default wrap.