# text-wrap: balance

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

Equilibra la longitud de las líneas en bloques cortos de texto (títulos, pies de foto) para que nunca quede una sola palabra huérfana en la última línea. Limitado a unas pocas líneas por diseño.

## 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: Los navegadores sin soporte ajustan el texto de forma normal; no hace falta protección.

## Prompt

Aplica `text-wrap: balance` a títulos, entradillas de cita y títulos de tarjeta (cualquier cosa por debajo de ~4 líneas). No lo apliques a párrafos de cuerpo; usa ahí `text-wrap: pretty` donde esté soportado. Combínalo con `max-width` en unidades `ch`.