El mundo del diseño web está en constante evolución, y CSS sigue introduciendo propiedades que nos dan mayor control sobre la presentación del texto. Una de las adiciones más interesantes recientemente es la propiedad text-wrap, que permite a los desarrolladores definir con precisión cómo se comportan los saltos de línea en nuestros textos, algo que se necesitaba hace mucho tiempo.

¿Qué es text-wrap?⌗

La propiedad text-wrap está diseñada para gestionar el comportamiento de los saltos de línea en bloques de texto, ofreciendo valores como wrap, nowrap, balance y stable. Cada uno de estos valores proporciona diferentes opciones para controlar cómo el texto se adapta a los diferentes tamaños de pantalla.

El problema de los textos solitarios⌗

Uno de los problemas comunes en el diseño web responsive es la aparición de palabras solitarias en la última línea de un párrafo, especialmente en encabezados. Estas palabras aisladas (conocidas como huérfanas en tipografía) pueden afectar negativamente el equilibrio visual y la legibilidad. Tradicionalmente, resolver esto requería soluciones con JavaScript o técnicas de CSS como agregar un expacio a través de   entre las últimas palabras del texto. Pésimas soluciones.

text-wrap: pretty⌗

El valor pretty de la propiedad text-wrap está diseñado específicamente para evitar estas palabras solitarias. Cuando se aplica, el navegador ajusta automáticamente el texto para asegurar que al menos dos palabras aparezcan en la última línea de un párrafo o encabezado.

h1 {
  text-wrap: pretty;
}

Esto es particularmente útil para mejorar la apariencia de títulos y encabezados en diseños responsive, donde el ancho del contenedor puede cambiar significativamente según el dispositivo.

text-wrap: balance⌗

Otro valor interesante es balance, que distribuye las palabras de manera más equilibrada entre todas las líneas. Esto es especialmente valioso para bloques de texto cortos como titulares, donde se busca una distribución visual óptima.

h2 {
  text-wrap: balance;
}

Demo⌗

Preferí no hacer una demo propia porque ya hay una muy completa en CodePen:

Combinando con otras propiedades de texto⌗

La propiedad text-wrap se complementa perfectamente con otras propiedades de CSS para control tipográfico, como hyphens, word-break y overflow-wrap. Juntas, estas propiedades ofrecen un toolkit completo para optimizar la legibilidad y apariencia de nuestros textos en la web.

Soporte en navegadores⌗

El soporte para text-wrap ya está disponible en varios navegadores modernos:

  • text-wrap: balance está soportado en Chrome y navegadores basados en Chromium desde la versión 113, Safari y Firefox también han incorporado soporte para esta propiedad.
  • text-wrap: pretty está disponible en Chrome 114+ y Edge 114+