Exploring the “balance” and “pretty” values of text-wrap

As a web developer for a very text heavy website, I’m always on the lookout for CSS advancements that improve text layout and rendering, simplify our workflows and enhance the user experience. One of the exciting recent additions to CSS is the ability to control text wrapping more effectively using the text-wrap property, specifically its new balance and pretty values. These values aim to make text layouts look more polished without the manual tweaks we’ve had to rely on in the past.

In this post, I’ll walk you through what balance and pretty do, how we used to achieve similar effects before they were available, and where you can use them today based on current browser support.

What do balance and pretty do?

Let’s start with the basics. The text-wrap property defines how text wraps within a container. While wrap has been the default, it doesn’t always produce visually pleasing results—lines often end up jagged or uneven, especially in narrower layouts. This is where balance and pretty step in.

1. balance: This value redistributes text to make line lengths as equal as possible. For example, if you have a paragraph inside a narrow container, it will try to avoid scenarios where one line has just one or two words while the others are full. It’s perfect for maintaining clean, uniform layouts.
2. pretty: This goes one step further by factoring in aesthetics. It optimizes not only the balance of lines but also their visual flow, including subtle adjustments like optical alignment. This is ideal for designs that demand a more polished, magazine-like text appearance.

See the Pen
WrapBalancePretty by Nico Brünjes (@codecandies)
on CodePen.

How we managed before

Before balance and pretty came along, achieving similar results required extra work—and often, compromises. Here are some of the methods I’ve used in the past:

• Manual line breaks: Manually adding <br> tags was a quick fix but inflexible. It often fell apart when content or container sizes changed, making it unsuitable for dynamic layouts.
• CSS hyphenation and justification: The hyphens property and text-align: justify; helped distribute text more evenly. However, these techniques didn’t offer the nuanced control that balance and pretty provide.
• Grid and flexbox: Although these layout tools didn’t directly address text wrapping, they sometimes helped create constraints that mimicked balance text. But they were still a workaround rather than a solution.

Browser support: A mixed bag

When it comes to browser support, there’s good news and bad news. Let’s break it down:

balance: widely supported

The balance value is already supported in the latest versions of major browsers:

• Chrome: Full support.
• Edge: Fully supported (thanks to its Chromium base).
• Firefox: Supported in recent versions.
• Safari: Support is rolling out in newer updates—check your version to confirm.

Because balance is already widely available, you can start using it in many projects today, especially if you’re targeting modern browsers.

pretty: still emerging

The pretty value, on the other hand, is only supported in the newest versions of Chrome and Edge at the time of writing. Support in Firefox and Safari is still pending, so this value is less practical for general use right now. If you want to experiment, make sure to include fallbacks like balance or normal.

Final thoughts

The addition of balance and pretty to the text-wrap property is an exciting development for anyone working on text-heavy layouts. These values simplify the process of creating clean, aesthetically pleasing text wraps—something that used to require a lot of manual effort.

For now, I recommend incorporating balance into your projects where applicable, as it’s already supported in most modern browsers. Keep an eye on pretty, though—it’s a promising feature that will likely gain traction as more browsers implement it.

Have you tried out balance or pretty yet? I’d love to hear your thoughts and experiences in the comments!