En ocasiones, sucede que un texto no se ve como nos gustaría según el dispositivo o el tamaño específico de la ventana del navegador, porque quedan líneas más largas que otras y no hay un equilibrio equitativo de palabras por líneas, es decir, no existe un buen balance de palabras entre una línea y otra.
Este problema es común en encabezados dentro de una web, donde a veces se obtienen líneas con un gran contraste en la longitud de cada una. Sin embargo, esto se puede solucionar con la propiedad text-wrap: balance dentro de CSS. Nuestro profesor del bootcamp, Sergio Jiménez, nos explica cómo funciona en el siguiente vídeo.
Aceptar el consentimiento para ver esto
En el vídeo, Sergio nos muestra dos casos de encabezados, uno en el que se utiliza la propiedad text-wrap: balance y otro en el que no. Para ver la diferencia, reduce y aumenta el tamaño de la ventana del navegador, lo que muestra cómo se adaptan las líneas a cada tamaño para tener un balance equitativo en el encabezado que tiene la propiedad text-wrap: balance, mientras que en el otro encabezado no se consigue dicho balance.
El código que ha utilizado Sergio para usar la propiedad text-wrap: balance en CSS para el encabezado llamado «tw», es el siguiente:
.tw {
text-wrap: balance;
}
Si quieres aprender más sobre CSS y las distintas tecnologías que comprende el desarrollo de software, apúntate a nuestras clases gratuitas de programación y descubre cómo es nuestro Bootcamp Full Stack Web Developer.
