Como prevenir que una palabra se salga de su contenedor

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;
}

Sin embargo, hay otra solución que ofrece una mejor experiencia de lectura: añadir el guión ortográfico al final del renglón cuándo una palabra se corta para indicar que la palabra continúa en el renglón siguiente. Esto se consigue con la regla CSS hyphens: auto (CSS3):

.break-word {
     hyphens: auto;
}

Para conseguir la máxima compatibilidad con diferentes navegadores se debe combinar hyphens y word-break. De este modo los navegadores que no soportan hyphens seguirán rompiendo la palabra aunque sea sin guión.

.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;
}

Hyphens, combinado con text-align: justify nos valdría para justificar texto al estilo «periódico»:

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.

Importante

Artículos Relacionados

Comentarios