Si tenemos una palabra muy larga puede pasar que ocupe más ancho que su contenedor y que no se pueda leer o, en el mejor de los casos, rompa el layout de nuestra web. Este problema puede provocar más de un calentamiento de cabeza, especialmente en diseños adaptativos cuándo se ven en pantallas pequeñas y se está utilizando un tamaño de fuente grande.La solución rápida sería utilizar word-break: break-all:
.break-word {
word-break: break-all;
}.break-word {
hyphens: auto;
}.break-word {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}Importante
Para que la propiedad hyphens: auto funcione, el elemento en el que se aplica tiene que tener definido el atributo lang. Esto es debido a que el guión separador (hyphen) se introduce después de determinados caracteres que dependen de cada idioma; si el idioma no ha sido establecido el navegador suele ignorar la propiedad hyphens: auto.
El atributo lang es hereditario, por lo que no es necesario definirlo en cada elemento. Generalmente una página web tiene el atributo lang definido en la etiqueta <html> y se hereda al resto del documento, por lo que no suele haber ningún problema con la propiedad hyphens: auto pero si notas que no funciona como esperas, comprueba que esté definido el atributo lang.
También se pueden introducir manualmente los caracteres que señalan la posición dónde se insertará el guión separador si es necesario o definirlos a través de reglas CSS. Hacerlo se queda fuera del propósito de este post pero si estás interesado puedes ver una explicación bastante completa en hyphens – CSS Reference.
Comentarios