Skip to main content
🎨 CSS as a design system·Module B4 · Lesson 6
TaskApply text-wrap: balance to h1 and h2. Apply text-wrap: pretty to p.

text-wrap: balance / pretty (the 2024 game-changers)

100 XP6 min
Theory

Two values that solve old typography pain

h1, h2 { text-wrap: balance; }     /* headings: distribute words evenly across lines */
p      { text-wrap: pretty; }      /* body: prevent orphans (single-word last lines) */

text-wrap: balance

Shipped Chrome/Safari/FF 2023-24. For HEADINGS — distributes words so each line has roughly the same width.

Before:

This is a long heading that breaks
poorly

After text-wrap: balance:

This is a long heading
that breaks poorly

Symmetric. Looks designed. Free.

text-wrap: pretty

Shipped 2024. For BODY text — prevents the last line of a paragraph from being a single short word ("orphan"). Slightly more expensive than auto so don't apply to all text — just paragraphs where it matters.

… some long paragraph that ends with a
single

After text-wrap: pretty:

… some long paragraph that ends with
a single

The browser shifts a word from the previous line.

When NOT to use them

  • On dynamic content that re-renders frequently — balance is computed lazily and can cause jank.
  • On very long paragraphs — pretty slows down with O(lines²) work in extreme cases.

For 99% of marketing sites with reasonable content, both are free wins.

Browser support

  • Chrome / Edge — both shipped.
  • Safari — balance shipped, pretty mostly.
  • Firefox — both shipped.

In 2026: ship both, treat as a progressive enhancement (old browsers fall back to normal wrap, no harm done).

🔒

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.

Sign up — free trial →

First 15 lessons in each track are free. No card needed for those.

PreviousNext lesson →

Get one Python or web tip a day — by email

Short, hand-written, no spam. Unsubscribe in one click.