Newly availableUseful when text-wrap: balance affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.
Typography Newly available

text-wrap: balance

The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.

Typography

Overview

The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.text-wrap-style.balance
130
130
124
17.5
130
17.5
CSS property
balance
114
114
121
17.5
114
17.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

/* Broader specification */
.balanced-heading {
  text-wrap: balance;
  max-width: 40ch;
}

Live demo

barans none

text-wrap: balance barans none demo.

PreviewFullscreen

Balanceapply

text-wrap: balance Balanceapply demo.

PreviewFullscreen

Max-widthlimit with

text-wrap: balance Max-widthlimit with demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use text-wrap: balance to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links

Powered by web-features