CSS text-wrap Property: pretty and balance Explained

The text-wrap property in CSS offers a powerful way to control how text wraps within its container. While traditional text wrapping relies on basic browser rules, newer values like pretty and balance provide enhanced options for achieving visually appealing text layouts.

This post will explore how these values work and when to use them.

“Typography is the craft of endowing human language with a durable visual form.” – Robert Bringhurst

What is the Text-Wrap Property?

The text-wrap property is part of the CSS Text Module Level 4 specification (currently a Working Draft, last updated May 2024). It is designed to handle text wrapping strategies.

By default, text wraps according to the browser’s standard behavior. With text-wrap, developers can exert finer control over how text fits within its container.

Basic Syntax

The text-wrap property is actually a shorthand that combines two longhand properties: text-wrap-mode (whether text wraps) and text-wrap-style (how it wraps).

element {
  text-wrap: value;
}

CSS text-wrap Values

Here are the applicable values for the text-wrap property:

• wrap: The default behavior where text wraps naturally within the container (equivalent to normal in older syntax).
• nowrap: Prevents text from wrapping, keeping it on a single line.
• balance: Balances the length of lines, ensuring lines within a block have a more consistent width.
• pretty: Optimizes text wrapping for aesthetic appeal, improving line breaks to enhance readability and prevent orphan words.
• stable: Keeps lines before the editing cursor stable when the user edits content in a contenteditable element.

Diving Into Pretty and Balance Values

Both pretty and balance are designed to address specific challenges in text layout, enhancing readability and the overall visual experience. While pretty focuses on aesthetic line breaks, balance works towards maintaining uniformity in line lengths.

Understanding the distinctions between these values will help you choose the right one for your design needs.

Pretty

The pretty value focuses on improving the appearance of text by adjusting line breaks for better aesthetics. It minimizes orphan words and makes additional refinements to improve the flow and readability of text.

For example, pretty adjusts hyphenation if consecutive hyphenated lines appear at the end of a paragraph. It can also make subtle adjustments to previous lines to create space for better wrapping.

Additionally, when text justification is applied, pretty ensures that the adjustments for alignment don’t lead to awkward breaks or spacing issues. This makes it an excellent choice for achieving more polished and professional typography.

While its current focus is primarily on improving line breaks and handling orphans, future updates to text-wrap: pretty may introduce more advanced text-breaking optimizations.

p {
  text-wrap: pretty;
}

Using pretty ensures that line breaks enhance the reading experience while handling hyphenation and justification seamlessly.

Balance

On the other hand, balance ensures that the lines of text within a block are of similar length. This helps avoid scenarios where one line is significantly shorter than the others, which can disrupt the visual flow.

div {
  text-wrap: balance;
}

This value is particularly beneficial when designing responsive layouts, as it maintains consistent line lengths across various screen sizes.

See the Pen
Animated comparison of balanced and unbalanced headlines by Roee Yossef (@roeey)
on CodePen.

Stable

The stable value is designed specifically for editable content. When applied to a contenteditable element, it prevents lines before the editing cursor from re-wrapping as the user types.

Without stable, editing a word in the middle of a paragraph can cause all surrounding lines to shift and reflow. With stable, only the line being edited is affected, creating a much smoother editing experience.

[contenteditable] {
  text-wrap: stable;
}

Browser support for stable is strong: Safari 17.5+, Firefox 121+, and Chrome/Edge 130+.

The Longhand Properties

The text-wrap shorthand actually maps to two separate longhand properties. Understanding them gives you more granular control.

text-wrap-mode controls whether text wraps at all. It accepts wrap (default) or nowrap. This is the equivalent of the wrapping toggle.

text-wrap-style controls how text wraps when breaks occur. It accepts auto, balance, pretty, stable, and the not-yet-supported avoid-orphans.

/* Using the longhand properties */
h2 {
  text-wrap-mode: wrap;
  text-wrap-style: balance;
}

/* Equivalent shorthand */
h2 {
  text-wrap: balance;
}

Practical Examples

Let’s explore a practical use case where both pretty and balance can be applied. Imagine a Hero Section on your website with an unevenly wrapped title.

Applying text-wrap: balance to the headline will ensure that the lines are evenly distributed, creating a more consistent appearance. This guarantees a balanced layout regardless of the text content in the headline.

In the following example, notice how an orphan word appears at the end of the subtitle:

Using text-wrap: pretty will resolve the issue regardless of screen width. It consistently ensures that no orphan words remain, which is a remarkable improvement.

In this example, the balanced wrapping ensures consistent line lengths, reducing the likelihood of orphan words appearing at the end of a block.

When to Use Each Value

Choosing the right text-wrap value depends on the context. Here is a quick guide:

• Headings and short titles: Use balance to distribute text evenly across lines. It works best on elements with 6 lines or fewer.
• Body text and long paragraphs: Use pretty to eliminate orphan words and improve line-break quality without affecting the overall layout.
• Editable content: Use stable on contenteditable elements to prevent layout shifts while the user types.
• Single-line elements: Use nowrap for labels, badges, or any element that should never break to a second line.

A common pattern in production is to combine balance for headings and pretty for body text:

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Browser Support

The text-wrap property reached Baseline 2024 status as of March 2024, meaning it works across the latest versions of all major browsers. Support varies by value:

• balance: Chrome 114+, Edge 114+, Firefox 121+, Safari 17.5+.
• pretty: Chrome 117+, Edge 117+, Opera 103+, Safari 26+. Firefox does not yet support pretty (as of early 2026).
• stable: Safari 17.5+, Firefox 121+, Chrome/Edge 130+.
• nowrap: Supported in all modern browsers.

Since text-wrap is a progressive enhancement, unsupported browsers simply fall back to normal wrapping. There is no visual breakage, just the default line-break behavior.

Performance Considerations

The native CSS text-wrap property is significantly faster than JavaScript-based text balancing solutions. Benchmarks show that CSS balance runs 10-100x faster than equivalent JS implementations, completing in 2-5ms versus 49-461ms for JavaScript on the same set of headings.

That said, there are a few things to keep in mind:

• Use selectively: Apply balance to headings and short text blocks where visual balance matters most. Applying it to large blocks of body text adds unnecessary computation.
• Prefer pretty for long text: For paragraphs and longer content, pretty is a better fit. It optimizes line breaks without the heavier balancing algorithm.
• Layout shifts: When combined with responsive designs, recalculated line breaks can sometimes cause layout shifts. Test on various screen sizes to ensure a smooth experience.
• Progressive enhancement: Since unsupported browsers fall back gracefully, you can safely use text-wrap without worrying about breaking older devices.

Apply text-wrap selectively to key text elements. The native CSS implementation is fast, but targeting only the elements that benefit most keeps rendering overhead minimal.

FAQs

Common questions about the CSS text-wrap property:

Conclusion

The text-wrap property, especially with values like pretty and balance, provides powerful tools for improving text presentation in web design. By leveraging these values, developers can create layouts that not only look better but also enhance readability and user experience.

These values solve common typography issues such as orphan words and uneven line lengths, ensuring your text remains visually harmonious. With Baseline 2024 support and graceful fallback behavior, text-wrap is ready for production use today.

“Typography goes beyond just font selection; it involves structuring content for optimal readability and aesthetics. Learn more about this in our detailed guide on The Role of Typographic Hierarchy and Fonts in Effective Web Design.”

For more insights into CSS properties, explore our CSS category or check out our guide on CSS Containment for another way to optimize rendering performance.