# text-wrap: balance

Status: Baseline 2024 (Chrome 114, Safari 17.5, Firefox 121).  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap  
Página: https://designforai.dev/pt/css/text-wrap

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.

## HTML

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

## CSS

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

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

## 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`.