Text wrap: adaptive typography with cleaner line breaks

Avoid awkward title wraps and lonely last words by using `text-wrap` to improve readability and visual balance.

📘 Theory

`text-wrap: balance`

Best for short text where visual rhythm matters.

When you apply `text-wrap: balance`, the browser tries to distribute the text so each line feels more even in length.

That makes it especially useful for headings, pull quotes, banners and other short blocks where one weak last line would disrupt the composition.

Browsers usually limit balancing to a relatively small number of lines for performance reasons, so it is not meant to rebalance huge blocks of copy.

`text-wrap: pretty`

A gentler fix for longer reading text.

Unlike `balance`, which tries to improve the overall line distribution, `pretty` pays special attention to the final line and tries to avoid stranded single words.

That makes it a practical fit for paragraphs, article intros and body copy where readability matters more than perfect geometric symmetry.

Performance considerations

Better line breaks still have a layout cost.

Every time the browser recalculates layout, these smarter wrapping strategies may need to run again, especially when the viewport changes.

Use `balance` for short blocks where the payoff is obvious, and reserve `pretty` for text that truly benefits from a cleaner ending line.

1 `text-wrap: balance` 2 `text-wrap: pretty` 3 Performance considerations

🧪 Learn by doing

Example Lab: balance vs pretty Resize the container and compare the default wrap against `balance` and `pretty`.

⌄

Example Challenge: improve the hero title Apply the right property so the hero heading keeps more balanced lines at different widths.

⌄

🧰 Resources

Useful links

Chrome for Developers - CSS text-wrap: balance MDN - text-wrap MDN CSS MDN Layout Cookbook

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 22

Web typography: the variable font shift

Lesson 24

Shadows in CSS: box-shadow and text-shadow

›