Codectionary / Developer documentation / CSS

Balanced Heading Wrapping

Balanced wrapping asks the browser to distribute text more evenly across a limited set of lines.

What it is and why to use it

Balanced wrapping asks the browser to distribute text more evenly across a limited set of lines. It is useful for a short heading that would otherwise leave a very short final line. It changes line-breaking decisions without changing the words or adding manual line breaks.

Common mistakes and limitations

Browsers can limit how many lines they balance, and support varies across older releases. Use ordinary wrapping as the fallback. Do not rely on an exact line break for meaning or apply balancing to every long paragraph indiscriminately.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<p>Normal wrapping</p><h2 class="heading normal">Learn programming through practical examples</h2><p>Balanced wrapping</p><h2 class="heading">Learn programming through practical examples</h2>

Syntax

text-wrap: balance;

Examples

Balanced Heading Wrapping

Run the CSS against the supplied HTML, then experiment with the values.

.heading { max-width: 18rem; font: bold 2rem/1.15 system-ui; text-wrap: balance; }
.heading.normal { text-wrap: wrap; }
  1. The width constraint creates several heading lines.
  2. balance asks the layout engine to choose more even line lengths.
  3. Resize the preview and compare with the normal wrap value. Exact break positions depend on font metrics and the browser’s algorithm.
HTML used by this example
<div class="demo"><p>Normal wrapping</p><h2 class="heading normal">Learn programming through practical examples</h2><p>Balanced wrapping</p><h2 class="heading">Learn programming through practical examples</h2></div>

Best practices

  • Browsers can limit how many lines they balance, and support varies across older releases. Use ordinary wrapping as the fallback. Do not rely on an exact line break for meaning or apply balancing to every long paragraph indiscriminately.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading