Text Wrap Balance

ELI5 - The Vibe Check

You know when a heading wraps to two lines and the second line has one lonely word hanging out there looking sad? text-wrap: balance fixes that with one CSS line, redistributing words across lines so they're roughly even. Designers have wanted this for decades and it turns out browsers just needed to be asked.

Real Talk

text-wrap: balance is a CSS value that instructs the browser to distribute text evenly across lines in a block, minimizing raggedness, most commonly used on headings and short text blocks. Browsers typically cap it to a small number of lines for performance reasons, since balancing longer text is computationally expensive.

Show Me The Code

h1 {
  text-wrap: balance;
}

p {
  text-wrap: pretty; /* avoids orphans in body text */
}

When You'll Hear This

"Adding text-wrap: balance to our headings fixed every orphan word for free." / "text-wrap: balance only kicks in on short blocks, don't expect it on your body copy."