CSS text-wrap: balance and pretty: Eliminating Typographic Orphans

Home » CSS » CSS text-wrap: balance and pretty: Eliminating Typographic Orphans
August 5, 2025 CSS
CSS text-wrap: balance and pretty: Eliminating Typographic Orphans

CSS text-wrap: balance (Chrome 114+, Firefox 121+) distributes text evenly across lines in headings and short blocks so no line is dramatically shorter than the others — the browser solves the layout problem that designers used to fix with manual line breaks. The companion value text-wrap: pretty (Chrome 117+) prevents single-word orphans on the last line of paragraphs without affecting line distribution in the rest of the block.

Problem: Long headings and pull-quote text in WordPress block themes create typographic orphans — a single short word left on the last line — requiring manual   insertion or JavaScript-based balancing.

Solution: Use CSS text-wrap: balance on headings to make the browser distribute text evenly across lines, eliminating orphans. Use text-wrap: pretty on paragraph text to avoid orphans on the last line only, with minimal impact on the rest of the paragraph. Both properties are in all major browsers as of 2024.


The examples below show when to apply each value, a responsive typography snippet that combines both with @supports, and how to integrate them into a WordPress theme's global styles.


/* ── text-wrap: balance ─────────────────────────────────────────────────
   Best for: headings, captions, pull-quotes, card titles (≤ 6 lines)
   Browsers calculate up to 6 balanced lines; avoid on body text (perf)  */
h1, h2, h3, h4,
.wp-block-heading,
figcaption,
.card__title {
    text-wrap: balance;
}

/* ── text-wrap: pretty ──────────────────────────────────────────────────
   Best for: paragraphs — prevents a single orphaned word on last line
   Does NOT rebalance all lines; minimal layout cost                     */
p,
.wp-block-paragraph,
.entry-content > * {
    text-wrap: pretty;
}

/* ── @supports guard for older browsers ─────────────────────────────────
   Older browsers simply wrap normally — no visual regression            */
@supports (text-wrap: balance) {
    h1, h2, h3 { text-wrap: balance; }
}

@supports (text-wrap: pretty) {
    p { text-wrap: pretty; }
}

/* ── theme.json snippet (block themes) ──────────────────────────────────
   Add under styles > blocks > core/heading > typography                 */

/* In JSON (not CSS — shown here for reference):
{
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": { "textWrap": "balance" }
      },
      "core/paragraph": {
        "typography": { "textWrap": "pretty" }
      }
    }
  }
}
*/

/* ── Full example: a blog card ───────────────────────────────────────── */
.blog-card {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.blog-card__title {
    font-size: clamp(1rem, 2vw + .5rem, 1.4rem);
    text-wrap: balance;          /* even lines, no awkward short last line */
    margin: 0;
}

.blog-card__excerpt {
    color: #555;
    text-wrap: pretty;           /* no orphan on last line */
    margin: 0;
}


NOTE: text-wrap: balance has a deliberate performance limit — browsers will not balance more than six lines — so it is safe for headings but should never be applied globally to p or div elements; use pretty for body text where only the final line needs attention.

Related posts