text-wrap: balance & pretty
Stop using <br> tags to force your headings to break where you want them. Look at these instead.
text-wrap: balance makes lines roughly the same length. Awesome for headings, captions, blockquotes. Browsers cap it though... 6 lines in Chromium, 10 in Firefox. Keep it on short stuff.
text-wrap: pretty is for paragraphs. Prevents that orphan word dangling at the end of a text block. No Firefox support yet... Chrome 117+, Safari 26+. Degrades silently.
Both are progressive enhancements. No support just means normal wrapping.
balance
Chrome 130+, Firefox 121+, Safari 17.5+.
pretty
Chrome 117+, Safari 26+. No Firefox.
Part 1: text-wrap: balance
Distributes text evenly across lines — no more orphan words dangling off headings.
Default wrapping
Crafting Meaningful Digital Experiences for Every User
text-wrap: wrap
Balanced
Crafting Meaningful Digital Experiences for Every User
text-wrap: balance
Part 2: text-wrap: pretty
Prevents a single lonely word on the last line of paragraphs.
Default wrapping
Great typography is invisible. Readers flow through content without noticing where lines break or how words are distributed. But a single orphaned word stranded on the final line of a paragraph disrupts the rhythm and pulls attention away from the meaning.
text-wrap: wrap
Pretty
Great typography is invisible. Readers flow through content without noticing where lines break or how words are distributed. But a single orphaned word stranded on the final line of a paragraph disrupts the rhythm and pulls attention away from the meaning.
text-wrap: pretty