Text-wrap: Tipografía adaptativa y estética

Evita las 'viudas' y 'huérfanas' en tus títulos y párrafos automáticamente para mejorar la legibilidad y el diseño visual.

Lograr que un título se vea bien en todas las resoluciones ha sido históricamente una pesadilla para los diseñadores web. A menudo, un título perfecto en escritorio termina con una sola palabra en la última línea al verse en móvil, lo que arruina la estética del diseño.

La propiedad `text-wrap` introduce algoritmos inteligentes en el navegador que deciden cómo distribuir el texto para maximizar la armonía visual sin que tengamos que insertar saltos de línea `<br>` manuales o usar librerías de JavaScript.

En esta lección aprenderemos a usar `balance` para títulos impactantes y `pretty` para párrafos impecables, entendiendo cuándo y por qué usar cada uno por razones de rendimiento y experiencia de usuario.

  • Equilibrio visual para textos cortos.
  • Cuando aplicamos `text-wrap: balance`, el navegador calcula el número de líneas y distribuye los caracteres de forma que todas las líneas tengan una longitud similar. El objetivo es evitar que la última línea sea significativamente más corta que las anteriores.
  • **Limitación importante:** Por razones de rendimiento (layout cost), los navegadores suelen limitar el balanceo a un máximo de 4 o 6 líneas de texto. Por eso, su uso ideal es para encabezados (`h1`-`h6`), citas o banners.
  • Es especialmente útil en diseños centrados donde un texto desequilibrado rompe la simetría del layout.
  • Adiós a las palabras huérfanas.

Text-wrap: Balance

Equilibrio visual para textos cortos.

Cuando aplicamos `text-wrap: balance`, el navegador calcula el número de líneas y distribuye los caracteres de forma que todas las líneas tengan una longitud similar. El objetivo es evitar que la última línea sea significativamente más corta que las anteriores.

**Limitación importante:** Por razones de rendimiento (layout cost), los navegadores suelen limitar el balanceo a un máximo de 4 o 6 líneas de texto. Por eso, su uso ideal es para encabezados (`h1`-`h6`), citas o banners.

Es especialmente útil en diseños centrados donde un texto desequilibrado rompe la simetría del layout.

Text-wrap: Pretty

Adiós a las palabras huérfanas.

A diferencia de `balance`, que busca igualdad entre todas las líneas, `text-wrap: pretty` se centra específicamente en la última línea. Su algoritmo intenta evitar a toda costa las 'huérfanas' (una sola palabra al final de un párrafo).

Si el algoritmo detecta que va a quedar una palabra suelta, ajustará el espaciado o los saltos en las líneas anteriores para 'traerse' una palabra más a la última línea.

Este valor es ideal para el cuerpo del texto de un artículo (párrafos largos), ya que el coste computacional es menor que el de balancear todo el bloque.

Consideraciones de rendimiento

Usa con cabeza para no afectar la experiencia de usuario.

Aunque `text-wrap` mejora la estética, cada vez que el navegador tiene que recalcular el layout (por ejemplo, al redimensionar la ventana), debe ejecutar el algoritmo de balanceo o embellecimiento, lo que puede ser costoso en términos de rendimiento.

Por eso, es recomendable usar `balance` solo en textos cortos como títulos y `pretty` en párrafos largos, evitando su uso en bloques de texto dinámicos o con mucho contenido donde el coste de cálculo podría afectar la fluidez de la página.

CSS
23

Text-wrap: Tipografía adaptativa y estética

Evita las 'viudas' y 'huérfanas' en tus títulos y párrafos automáticamente para mejorar la legibilidad y el diseño visual.

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Text-wrap: Balance

Equilibrio visual para textos cortos.

Cuando aplicamos `text-wrap: balance`, el navegador calcula el número de líneas y distribuye los caracteres de forma que todas las líneas tengan una longitud similar. El objetivo es evitar que la última línea sea significativamente más corta que las anteriores.

**Limitación importante:** Por razones de rendimiento (layout cost), los navegadores suelen limitar el balanceo a un máximo de 4 o 6 líneas de texto. Por eso, su uso ideal es para encabezados (`h1`-`h6`), citas o banners.

Es especialmente útil en diseños centrados donde un texto desequilibrado rompe la simetría del layout.

Text-wrap: Pretty

Adiós a las palabras huérfanas.

A diferencia de `balance`, que busca igualdad entre todas las líneas, `text-wrap: pretty` se centra específicamente en la última línea. Su algoritmo intenta evitar a toda costa las 'huérfanas' (una sola palabra al final de un párrafo).

Si el algoritmo detecta que va a quedar una palabra suelta, ajustará el espaciado o los saltos en las líneas anteriores para 'traerse' una palabra más a la última línea.

Este valor es ideal para el cuerpo del texto de un artículo (párrafos largos), ya que el coste computacional es menor que el de balancear todo el bloque.

Consideraciones de rendimiento

Usa con cabeza para no afectar la experiencia de usuario.

Aunque `text-wrap` mejora la estética, cada vez que el navegador tiene que recalcular el layout (por ejemplo, al redimensionar la ventana), debe ejecutar el algoritmo de balanceo o embellecimiento, lo que puede ser costoso en términos de rendimiento.

Por eso, es recomendable usar `balance` solo en textos cortos como títulos y `pretty` en párrafos largos, evitando su uso en bloques de texto dinámicos o con mucho contenido donde el coste de cálculo podría afectar la fluidez de la página.

🧪 Aprende probando

Ejemplo Laboratorio: Balance vs Pretty Redimensiona el contenedor o cambia el texto para ver cómo el navegador recalcula los saltos de línea para mantener la armonía.
Ejemplo Reto: El Título Perfecto Aplica la propiedad necesaria para que el encabezado del héroe siempre tenga sus líneas equilibradas, sin importar el ancho de la pantalla.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .