TIL: mejorar la legibilidad con text-wrap: balance

on Iván Hernández Cazorla - Blog

Hoy he aprendido cómo usar la propiedad de CSS "text-wrap" con el valor "balance" para mejorar la legibilidad del texto.
#TIL, #CSS

English version available


Hoy navegando en Mastodon me saltó una publicación de Cassidy James, @cassidy@blaede.family en el fediverso, en el que compartía brevemente un valor que desconocía, balance, para la propiedad text-wrap de CSS.

Así que hoy he aprendido que text-wrap: balance es una opción que permite que el texto se ajuste de una forma más equilibrada, mejorando la estructura del texto resultando y su legibilidad.

Tras haberlo probado, he de admitir que el resultado que se obtiene, sobre todo con textos centrados, es realmente increíble.

Les animo a echarle un vistazo a su publicación, que tiene dos imágenes de ejemplos (uno con alineación a la izquierda y otro centrado) e impulsarla si también les ha interesado. ¡Gracias, Cassidy!

# Ejemplo

1.balanced-text {
2    text-wrap: balance;
3}

Izquierda, sin text-wrap: balance; derecha, con text-wrap: balance.

Texto alineado por defecto a la izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Texto centrado con text-align: center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend, nunc imperdiet finibus malesuada, ex metus dignissim nisl, ut laoreet velit diam eget nibh. Praesent viverra diam est, ut mattis eros volutpat sit amet. Phasellus ac eros elit. Sed eleifend pretium elit et vulputate...

# Importante

Según lo que indica la documentación de text-wrap en MDN, el comportamiento de text-wrap: balance varía entre navegadores, ya que depende de la implementación de la propiedad. Existe un número de líneas máximas permitidas para los bloques de texto que utilicen esta propiedad, que en el caso de Firefox son 10 líneas. No he probado esta limitación.

Por otra parte, si bien tiene bastante compatibilidad entre navegadores según MDN, no tiene soporte en Safari iOS y está en preview browser support en Safari. Firefox la soporta desde la versión 121, por lo que es relativamente nueva.


Formo parte de Molécula, un grupo de tres cowboys del espacio y alquimistas que programan mucho e intentan contribuir a la comunidad del software libre. Si te gusta lo que escribo o lo que contribuyo, puedes invitarnos a un café, té o maté. ¡Estamos en proceso de liberar varios proyectos!

Todas las entradas de este blog están bajo la licencia CC BY-SA 4.0. Las imágenes y otros recursos que no son de mi autoría tienen especificada su respectiva licencia. En caso de no tenerla, no dudes en reportármelo.

We are a team of three space cowboys and alchemists who develop software and try to contribute to the free software community. If you like what I write or what I contribute, you can invite us for a coffee, tea or maté. I still have have to finish developing several projects and, of course, release them!

All blog posts are licensed under CC BY-SA 4.0. The images or other resources that are not my autorship have their licenses specified. In case there is something it hasn't, don't hesitate to report it to me.