text-wrap: balance

Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121).

Chrome 114Edge 114Safari 17.5Firefox 121

Equilibra o comprimento das linhas em blocos curtos de texto (títulos, legendas) para você nunca ficar com uma única palavra órfã na última linha. Limitado a poucas linhas por design.

A heading long enough to wrap awkwardly on narrow screens

CSS

.fx-011 {
  text-wrap: balance;
  max-width: 26ch;
  font-family: system-ui;
  line-height: 1.15
}

HTML

<h2 class="fx-011">A heading long enough to wrap awkwardly on narrow screens</h2>

Fallback: Navegadores sem suporte quebram normalmente; nenhuma proteção necessária.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

Prompt

Aplique `text-wrap: balance` a títulos, aberturas de blockquote e títulos de card (qualquer coisa abaixo de ~4 linhas). Não aplique a parágrafos de corpo; use `text-wrap: pretty` neles onde houver suporte. Combine com `max-width` em unidades `ch`.