Equilibra los saltos de un titular con text-wrap: balance

Basta reducir unos píxeles el ancho de una tarjeta para que su titular termine con una sola palabra en la última línea. En la maqueta de escritorio parecía resuelto; en un móvil pequeño, ya no. Insertar un <br> a mano arregla esa captura, pero suele estropear la siguiente.

Deja que el navegador reparta las líneas

text-wrap: balance cambia cómo se eligen los saltos suaves de línea. La especificación CSS Text 4 del W3C explica que el navegador intenta equilibrar el espacio que sobra en cada línea. No parte palabras ni altera el texto: escoge entre los puntos de salto que ya existen.

.hero-title {
  max-inline-size: 18ch;
  text-wrap: balance;
}

La segunda regla mejora el reparto; la primera sigue marcando la anchura del bloque. Conviene separar ambas decisiones. Si el titular ocupa demasiado, balance no va a elegir por ti el tamaño, la medida o una frase más corta. Ojalá una línea de CSS hiciera también esa parte.

Resérvalo para textos cortos

Su sitio natural son títulos, entradillas breves y pies de foto de dos o tres líneas. MDN documenta límites distintos según el motor: Chromium equilibra bloques de hasta seis líneas y Firefox, de hasta diez. El propio estándar permite volver al reparto normal cuando hay más de diez.

Ese límite tiene sentido. Un párrafo no necesita que todas sus líneas parezcan igual de largas; necesita conservar un ritmo cómodo de lectura. La guía de tipografía de web.dev recomienda balance para encabezados, no como una capa general aplicada a toda la página.

Prueba el contenido real en varios anchos

Empieza con tres tamaños: la tarjeta más estrecha, el ancho habitual y el contenedor más grande. Cambia después el titular por uno corto y otro largo. Si trabajas con textos editables, incluye una versión con una palabra extensa, una cifra y signos de apertura. Ahí suele aparecer un ancho ajustado sólo para el ejemplo bonito.

Comprueba también que el documento declara bien su idioma. El W3C señala que las reglas tipográficas y de salto dependen de la lengua y del sistema de escritura. Para contenido en español, un lang="es" correcto da al navegador el contexto que necesita.

Yo dejaría los saltos manuales para una pieza cerrada cuya redacción no vaya a cambiar. En una interfaz con títulos editables, aplica balance, fija una anchura razonable y vuelve a mirar la última línea. Si una palabra sigue quedándose sola, prueba a reescribir el titular antes de añadir otra regla CSS.