text-wrap: balance paragraph

Quick implementation

/* Apply to headings and short text blocks */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* For longer paragraphs, use pretty instead */
p {
  text-wrap: pretty;
}

/* Balance works best on elements with 6 or fewer lines.
   The browser adjusts line breaks so each line
   has roughly equal width — no JavaScript needed. */

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in web typography.

Goal: Apply text-wrap: balance to headings and short text blocks to eliminate orphans and create even line lengths — no JavaScript.

Technical constraints:
- Use text-wrap: balance on h1–h4 elements and any short text (captions, card titles).
- Use text-wrap: pretty on longer paragraphs (it only prevents orphans on the last line, with lower perf cost).
- Balance is limited to ~6 lines by browsers — beyond that it falls back to normal wrapping.
- Use oklch() for all color values, not hex or rgba().
- Do not combine with white-space: nowrap or manual <br> tags — they override text-wrap.

Framework variant (pick one):
A) Vanilla CSS reset/base layer — apply globally to heading and paragraph selectors.
B) React + Tailwind — use the text-balance utility class on heading components.

Edge cases to handle:
- Dynamic content that changes length after render (balance recalculates automatically).
- RTL languages — text-wrap: balance works bidirectionally.
- Browsers without support fall back to normal wrapping — no visual breakage, just less polish.
- Very narrow containers where balance produces worse results than auto wrapping.

Return CSS.

Why this matters in 2026

For years, developers used JavaScript libraries like React Wrap Balancer to redistribute text across lines. These scripts recalculated on every resize, added bundle weight, and caused layout shift. text-wrap: balance moves this into the browser's layout engine — zero JavaScript, zero CLS, and it works with dynamic content out of the box. It shipped in all major browsers in 2023 and is now Baseline Widely Available.

The logic

When you set text-wrap: balance, the browser tries every possible line-break combination and picks the one where all lines are closest in width. This is computationally expensive, so browsers limit it to roughly 6 lines — beyond that it silently falls back to normal wrapping. For longer paragraphs, text-wrap: pretty is the better choice: it only adjusts the last line to prevent orphans, with negligible performance cost. Both properties are inheritable, so setting them on a container applies to all text descendants.

Accessibility & performance

Balanced text is easier to scan because the eye doesn't encounter abrupt short lines. This benefits users with cognitive disabilities and improves readability for everyone. Performance-wise, the browser caches line-break calculations per element, so resizing doesn't cause repeated full-text re-layout. The only caveat is that balance on very long text blocks (beyond the ~6 line limit) silently degrades — it never breaks layout, it just stops optimizing.