Cuando desarrollamos una web que muestra contenido generado por el cliente, ya sea un CMS propio, WordPress o cualquier tipo de plataforma en la que el usuario puede crear y publicar contenido propio, nos encontramos a veces con un problema en dispositivos de pantalla pequeña cuando añaden palabras o normalmente enlaces muy largos y sin guiones.
El problema es que por defecto, el texto se ajusta a su contenedor en función de los espacios , que permiten saltar de línea sin dificultar la lectura, y en estos casos en los que no hay espacios, sobre en enlaces, el navegador no puede dividir la línea y ésta sobresale de su contenedor.
Para evitarlo, podemos utilizar el selector word-break de CSS
.word-break tiene 3 opciones:
normal: la que comentábamos que dividie las frases por los espacios.break-all: divide el texto por cualquier caracter, sin tener en cuenta espacios o guiones.keep-all: tiene efecto sólo en idiomas como el chino, japonés o coreano, en otros idiomas funciona igual que el normal.break-word: permite dividir arbitrariamente el texto para evitar el overflow (que el texto sobresalga del contenedor)
Y para asegurarnoos compatibilidad con todos los navegadores, podemos utilizarlo junto con overflow-wrap: break-word;
Más información sobre overflow-wrap
Si trabajas con WordPress, con plantillas o starter themes, seguramente ya no debas preocuparte de este tema, porque la mayoría ya vienen con los estilos preparados para que el texto de páginas y posts se ajuste automáticamente al contendor, pero aún así va bien conocer esta opción por si no es así o maquetamos a medida.
Aquí tenéis un recursos muy práctico para probar las diferentes opciones de CSS para jugar con el ajuste del texto:
See the Pen Figuring Out Line Wrapping by Chris Coyier (@chriscoyier) on CodePen.