Enlaces largos y word-wrap

El selector word-break de CSS nos permite indicar cómo queremos que se dividan los textos y evitar que estos sobresalgan del contenedor.


por

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.