text-wrap: balance

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

Chrome 114Edge 114Safari 17.5Firefox 121

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.

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

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

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