El diseño del texto, en particular al final de las líneas y de los párrafos, puede afectar la legibilidad y el atractivo estético de una página. CSS proporciona varias opciones de ajuste de texto que pueden mejorar casos de uso específicos.
Para bloques de texto cortos, como encabezados, usa text-wrap: balance. Esta propiedad le indica al navegador que distribuya el texto de la manera más uniforme posible entre las líneas, lo que crea una apariencia más simétrica.
La propiedad de CSS text-wrap: pretty te permite mejorar la calidad tipográfica del texto del cuerpo habilitando un algoritmo de ajuste más sofisticado. Está diseñado específicamente para evitar las "huérfanas" (palabras sueltas en la última línea de un párrafo) y crear un "margen irregular" más agradable visualmente para los bloques de texto largos.
Implementación
1. Identifica los elementos de texto:
Para text-wrap: balance, selecciona bloques de texto cortos, como encabezados y encabezados de tablas. Evita los elementos que tengan cuadros visibles, como bordes o fondos, ya que esto puede crear áreas visualmente vacías inesperadas en el diseño.
Para text-wrap: pretty, selecciona elementos que puedan contener textos largos en los que las palabras huérfanas (líneas cortas) o los saltos de línea deficientes sean más notorios. Esto incluye los siguientes elementos:
<p><blockquote><li>- Cualquier otro elemento que pueda contener textos largos
Cómo elegir el método de empaquetado adecuado
| Criterios | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap (predeterminado) |
|---|---|---|---|
| Ideal para | Bloques cortos (encabezados, títulos) | Bloques largos (párrafos, listas) | Contenido fundamental para el rendimiento |
| Objetivo visual | Longitudes de línea simétricas | Cómo evitar las líneas huérfanas ("líneas cortas") | Ajuste estándar rápido |
| Restricciones de líneas | Hasta 6-10 líneas (límite del algoritmo) | Ideal para 3 o más líneas | Sin límite |
| Costo de rendimiento | Alto: Algoritmo de búsqueda binaria | Medio: Algoritmo de retrospectiva | Baja: Algoritmo voraz estándar |
2. Aplica el ajuste elegido:
Aplica text-wrap: balance específicamente a elementos cortos de varias líneas, como encabezados (h1-h6), subtítulos o citas destacadas.
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
Usa text-wrap: pretty para habilitar un algoritmo optimizado que evalúe las últimas líneas de un párrafo para encontrar los mejores puntos de interrupción.
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
Restricciones y rendimiento críticos
text-wrap: balance
- Límite de líneas: Los navegadores imponen un límite en la cantidad de líneas que intentarán equilibrar para mantener el rendimiento (por lo general, 6 líneas en Chromium y 10 líneas en Firefox). Si el texto supera este límite, el navegador vuelve al comportamiento estándar de
wrap. Evita usartext-wrap: balanceen bloques de texto que puedan superar estos límites. - Aplicación segmentada: NO apliques
text-wrap: balancede forma global (p.ej.,* { text-wrap: balance; }). El algoritmo iterativo de "búsqueda binaria" que usan los navegadores es costoso desde el punto de vista computacional. Limita su uso a elementos de texto específicos y breves. - Interacción con el ancho:
text-wrap: balanceno cambia el ancho del contenedor (inline-size). Solo afecta cómo se ajusta el texto dentro de ese ancho. Esto puede dejar espacio vacío al final del contenedor, lo que puede afectar los diseños que dependen de bloques de texto de ancho completo.
text-wrap: pretty
- Rendimiento vs. calidad: OBLIGATORIO:
text-wrap: prettyrequiere más capacidad de procesamiento que el algoritmo predeterminadowrap(greedy) porque evalúa varias líneas (por lo general, las últimas cuatro) para optimizar los puntos de interrupción. Evita aplicarlo de forma global a todos los elementos si tu página tiene una cantidad excesiva de contenido de texto. - Ideal para texto de varias líneas: Los beneficios de
prettyson más evidentes en párrafos de tres o más líneas. Tiene poco o ningún efecto en el texto corto de una sola línea. - Comportamiento específico del navegador: Ten en cuenta que los detalles de implementación varían. Los navegadores basados en Chromium suelen enfocarse en las últimas cuatro líneas, mientras que otros motores pueden evaluar todo el párrafo.
Estrategias de resguardo
En los navegadores que no admiten text-wrap: balance ni text-wrap: pretty, se ignora la propiedad y el texto se ajustará con el comportamiento predeterminado de wrap. Esta es una mejora progresiva que se degrada de forma elegante a la tipografía estándar. Esto garantiza que tu contenido siga siendo perfectamente legible en todos los navegadores y, al mismo tiempo, proporciona una experiencia superior a los que lo admiten.
Para los diseños críticos en los que se requiere un diseño de texto refinado, usa una biblioteca de JavaScript, pero ten en cuenta que esto puede ser lento y causar problemas de rendimiento.