CSS text-wrap: balance and pretty

Headlines wrapping to leave a single orphaned word on its own line. Paragraphs ending with one lonely word dangling at the bottom. These typographic sins have plagued the web for decades. CSS text-wrap: balance and text-wrap: pretty finally fix them—no JavaScript hacks, no   spam, no manual line breaks.

The Problem: Unbalanced Text

<!-- Classic orphan problem -->
<h1>Why Frontend Development Is Getting More
Complicated</h1>

<!-- What we actually see: -->
Why Frontend Development Is Getting More
Complicated  <-- orphaned word, looks terrible

Browsers wrap text at the container edge without considering the visual result. Long headlines end up with one word on the final line, paragraphs have lonely orphans, and designers cry.

text-wrap: balance

balance distributes text across lines to equalize their lengths. It's designed for short text like headings, pull quotes, and captions.

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

/* Before balance: */
The Quick Brown Fox Jumps Over the Lazy
Dog

/* After balance: */
The Quick Brown Fox
Jumps Over the Lazy Dog

The browser adjusts line breaks to make line lengths as similar as possible, eliminating the jarring single-word last line.

The 6-Line Limit

Balancing text is computationally expensive. Chrome limits balance to 6 lines or fewer. Firefox caps at 10. Beyond that, the browser falls back to normal wrapping. This is intentional—balancing a 50-line paragraph would be slow and visually strange anyway.

/* ✅ Good: headlines, subheadings, captions */
.hero-title {
  text-wrap: balance;
}

/* ❌ Bad: body text (ignored anyway) */
article p {
  text-wrap: balance; /* Won't work for long paragraphs */
}

Balance Doesn't Shrink Text

balance only adjusts where lines break—it doesn't change font size, letter spacing, or word spacing. The total text height may increase slightly because lines become more even in length.

text-wrap: pretty

While balance targets short text, pretty is designed for body text. It focuses on one thing: avoiding orphans—single words stranded on the last line.

article p {
  text-wrap: pretty;
}

/* Before pretty: */
This is a long paragraph that explains something
important about the topic at hand. The final word ends up
alone.

/* After pretty: */
This is a long paragraph that explains something important
about the topic at hand. The final word ends
up alone.  <-- Pulls "up" to join "ends"

pretty examines the last 4-6 lines and rebalances them to prevent orphans. Unlike balance, it doesn't try to equalize all lines—just fix the ending.

pretty vs orphans CSS Property

CSS has an orphans property, but it only applies to paged media and multi-column layouts—not regular flowing text. text-wrap: pretty is the first real solution for inline orphan prevention.

/* These do different things! */
p {
  orphans: 2;        /* Paged/multi-column only */
  text-wrap: pretty; /* Inline text orphan prevention */
}

pretty Doesn't Fix Widows

Widows (single words at the start of a text block) aren't handled by pretty. It specifically targets orphans at the end. For widows, you're still stuck with manual intervention or JavaScript.

When to Use Which

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

/* Pull quotes, captions, labels: balance */
blockquote, figcaption, .caption {
  text-wrap: balance;
}

/* Body text: pretty */
article p, .prose p {
  text-wrap: pretty;
}

/* UI text (buttons, labels): neither needed */
button, label {
  /* Usually single-line, no wrapping concerns */
}

Performance Considerations

Balancing requires the browser to try multiple line-breaking arrangements and compare them. This happens during layout, so:

• balance on headings: Minimal impact—they're short and few
• pretty on paragraphs: Only examines the last few lines, optimized
• balance on long text: Ignored (falls back to normal)

Don't apply balance to hundreds of paragraphs hoping for magic. Use it surgically on headings and short text blocks.

Browser Support

As of early 2026:

• balance: Chrome 114+, Edge 114+, Firefox 121+, Safari 17.5+
• pretty: Chrome 117+, Edge 117+, Firefox 122+, Safari 17.5+

Both properties gracefully degrade. Unsupported browsers simply ignore them and wrap text normally. No polyfill needed—it's progressive enhancement.

The New Longhand Properties

CSS4 Text introduced separate properties for wrapping mode and style:

/* Shorthand (what we've been using) */
text-wrap: balance;

/* Equivalent longhands */
text-wrap-mode: wrap;
text-wrap-style: balance;

/* Other modes */
text-wrap-mode: nowrap;  /* Same as white-space: nowrap */

/* All style values */
text-wrap-style: auto;         /* Default browser behavior */
text-wrap-style: balance;      /* Equal line lengths */
text-wrap-style: pretty;       /* Orphan prevention */
text-wrap-style: stable;       /* Don't reflow during edits */
text-wrap-style: avoid-orphans; /* Alias for pretty in some specs */

Practical Implementation

/* Global defaults */
:root {
  text-wrap: pretty; /* Apply to all text by default */
}

/* Override for headings */
h1, h2, h3, h4, h5, h6,
blockquote,
figcaption,
.pull-quote,
.hero-text {
  text-wrap: balance;
}

/* Explicitly disable for preformatted */
pre, code {
  text-wrap: nowrap;
}

Starting with text-wrap: pretty on :root ensures paragraphs throughout your site avoid orphans, then override with balance where appropriate.

Edge Cases

RTL Text

Both properties work with right-to-left text. The balancing algorithm considers the writing direction automatically.

Mixed Content

Inline elements (links, bold, code) don't break balancing. The browser considers the full text content regardless of inline markup.

Dynamic Content

Both properties respond to container resizing. If the viewport changes, lines rebalance. This is handled automatically—no JavaScript resize listeners needed.

Key Takeaways

• text-wrap: balance equalizes line lengths—use for headings (6 lines max)
• text-wrap: pretty prevents orphans—use for body paragraphs
• Both gracefully degrade in older browsers (progressive enhancement)
• Performance is optimized; use surgically, not globally on everything
• Finally kills the   hacks and JavaScript text-balancing libraries