Información del post ⇣

text-wrap: balance

Los posts dentro de la categoría nuevo en css describen funcionalidades que aún no están disponibles en todos los navegadores o su soporte es muy reciente. Es conveniente asegurarse antes de usarlo en producción o apliciar los fallbacks necesarios.
La propiedad <abbr title="Cascading Style Sheets">CSS</abbr> <code>text-wrap</code> controla como fluye el texto dentro del contenedor.

Uno de los valores de text-wrap es balance, que nos permite distribuir el texto de manera que solventa el problema de las viudas (palabras que aparecen aisladas de su contexto al final de un párrafo).

Este valor, solo aplica a textos de no más de seis lineas y hay que tener en cuenta que impacta considerablemente en el rendimiento de la pagina, así que lo usaremos solo cuando debemos priorizar el aspecto al rendimiento.

text-wrap: balance no afecta al ancho del elemento.

Ejemplos con y sin text-wrap: balance.

Podéis ver varios casos de uso en el artículo de Ahmad Shadeed

Data on support for the css-text-wrap-balance feature across the major browsers from caniuse.com
Soporte en navegadores

Links relacionados