Una URL larga o un identificador compuesto en medio de un párrafo pueden hacer que una columna sea más ancha que la página. La solución es un par de propiedades con diferentes personalidades, y usar ambas juntas es el truco.
html { lang: en; }
p { hyphens: auto; overflow-wrap: anywhere; }que hace cada uno
- guiones: inserta automáticamente puntos de separación de palabras reales utilizando el idioma del documento; con un idioma incorrecto en html, el navegador no puede conocer las reglas, así que configure el idioma primero.
- overflow-wrap: en cualquier lugar permite una interrupción dentro de cualquier token irrompible demasiado largo, que captura URL, hashes e identificadores que ningún diccionario contiene.
- en cualquier lugar también suaviza el ancho mínimo del contenido del cuadro, porque la palabra ya no lo fuerza; eso es lo que permite que la columna se encoja.
La combo, tampoco sola.
La separación de palabras por sí sola deja la URL intacta en el borde de la línea; en cualquier lugar solo rompe palabras sin marca visible. Juntos, la prosa recibe un guión civilizado y los tokens de las máquinas obtienen un duro descanso, y ninguno de los dos se comporta mal donde más duele.
Las páginas multilingües obtienen un valor adicional: el navegador divide cada párrafo en su propio idioma, por lo que un impresionante compuesto en alemán y una frase corta en inglés coexisten sin un caso especial.
Pruebe una vez con un slug de cuarenta caracteres en una tarjeta estrecha. Si se sienta, la pareja se despliega; si cuelga, algún atributo lang está mintiendo.