text-wrap: balance; Fix Your Headings With 1 Line of CSS

As CSS keeps evolving, it brings new properties to improve design flexibility and user experience.

In today's short article, we're looking at the text-wrap: balance CSS property: what it is, why you'd use it, and how to use it.

What is text-wrap: balance?

It's a new property in CSS that "balances" your headings. 👇

The text-wrap property manages text wrapping within a container.

Using the balance value, it auto-balances text lines across columns for a balanced visual design.

This can be very tricky to achieve without the new property. And since your titles are the first thing people usually see on your page, this can ensure they look great every time.

Before:

After:

How to use it:

1 line of CSS is all you need to start using it today!

Add text-wrap: balance; to whatever selector you want to apply it to.

Here's an example with a h1:

.h1 {
  text-wrap: balance;
}

And if you want to play around with it in a CodePen:

Why use it?

First and most obvious is that manually setting up breakpoints and trying to balance a heading can be very difficult (and inconsistent).

It also usually requires writing a lot of code, which generally leads to more bugs...

With balance, you get responsive balanced lines of text easily in a single line of CSS! 💅

Caution: Browser Support!

It's a new feature, so check which browsers support it.

Only Chromium-based browsers (like Chrome and Edge) support it at the time of writing. But you can check out the current support state here on Can I use.

If you want to start using it today, assume that it won't work on some browsers and have suitable fallbacks.

Happy coding! ❤️

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉