CSS text-wrap

Una de las afirmaciones que podemos hacer sin ningún tipo de duda, es que CSS como lenguaje de estilado, en estos últimos meses ha estado sufriendo una serie de actualizaciones que justamente permite que podamos contar con funcionalidades nativas que son de mucha utilidad. Es por eso que en este breve artículo queremos analizar un nuevo valor que se suma a la propiedad text-wrap.

Pero, antes de comenzar a explicar más sobre esta novedad, repasemos un poco sobre esta propiedad.

¿Qué es text-wrap? 🤔

text-wrap es una propiedad que tiene como principal objetivo ajustar un determinado texto dentro de un elemento. Es por eso que tiene valores que posicionan el elemento de texto de determinadas maneras. Veamos algunos valores que podemos usar:

text-wrap: wrap

Este es el valor por defecto, y nos permite es poder ajustar el salto del texto para evitar el desbordamiento en proporción a su elemento contenedor. Veamos un ejemplo.

text-wrap: nowrap

En este caso, esta propiedad permite que el texto se ajuste o posicione sin evitar el desbordamiento, en el caso de que su elemento contenedor sea menor a las proporciones del mismo.

text-wrap: balance

Esta propiedad, como su nombre lo indica, lo que permite es que los textos estén balanceados, y equilibrados buscando la mejor solución de ajuste de linea, teniendo en cuenta el tamaño de la fuente, el idioma, o el área designada. Lo que se traduce en facilidad de lectura al usuario. Veamos un ejemplo:

⚠️ Nota importante: Este es un nuevo valor, que está disponible a partir de la versión 114 de Chrome. Si bien no tiene soporte en todos los navegadores web, contamos con la filosofía de Progressive Enhancement (Mejora Progresiva). Esto implica que los usuarios que cuenten con la versión correspondiente que brinden soporte a esta funcionalidad, podrán ver reflejados los cambios. En el caso de que no sea posible, sencillamente la funcionalidad no se vera reflejada. Es por eso que puedes mirar el soporte actualizado en esta pagina

Limitantes a tener en cuenta

Como la tarea de equilibrar los textos requiere que el navegador busque la mejor manera de poder hacerlo, esto obviamente tiene un coste. Es por eso que esta propiedad se podrá aplicar con la condicional de que sean 6 líneas o menos en el elemento. En el caso de que este número sea superado, no será aplicada esta propiedad.

Si tenemos en cuenta de que aplicar esta propiedad requiere un coste por parte del navegador, es recomendable poder usarlo con prudencia y siendo conscientes en que parte de nuestra página lo aplicaremos.

Conclusión

Sin dudas, mantenerse al día en cuanto a novedades que van siguiendo en lenguajes, como CSS, es todo un desafío. Los cambios en tecnologías web, son constantes y dinámicos, por lo que mantenerse actualizado en nuevas herramientas, técnicas y estándares de codificación nos ayuda a ser más versátiles y eficientes como desarrolladores.

Desde ya muchas gracias por llegar hasta acá.

Happy Coding !! 👨🏻‍💻👩🏻‍💻