text-wrap: balance / text-wrap: pretty
CSS line breaking that balances short headings and gives paragraphs a cleaner rag without freezing the layout with manual breaks.
See it
What it is
'text-wrap: balance' asks CSS to choose breaks that make the lines in a short block closer in length. It is for headings, decks, captions, and other text with only a few lines. 'text-wrap: pretty' is the paragraph setting: it lets the browser spend more work choosing breaks that avoid awkward short lines and improve the rag. Chrome shipped balance in version 114 and pretty in 117, and the other engines followed; print designers had the same tool for years as InDesign's Balance Ragged Lines.
Reach for balance on headings that keep producing one tiny final line, and pretty on readable body copy where a better break is worth more than the cheapest layout pass. Both are responsive: the browser recomputes the breaks when the available width changes, unlike a hand-inserted line break.
The gotcha is treating either value as a guarantee. Browser algorithms and limits can differ, balance is intended for short blocks, and pretty cannot rescue a measure that is simply too narrow. Use them as progressive enhancement, keep sensible widths, and reserve a non-breaking space for the rare pair that absolutely must stay joined.
Ask AI for it
Improve responsive line breaks with CSS. Apply 'text-wrap: balance' to h1, h2, hero decks, and card titles, but only where the copy stays short. Apply 'text-wrap: pretty' to article paragraphs inside '@supports (text-wrap: pretty)'. Keep paragraph measure at 'max-width: 65ch', remove manual br elements used only for visual wrapping, and do not justify the text. Test widths of 320px, 768px, and 1440px. Report any heading that still ends on one short word rather than forcing a fixed break.