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 10 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.