Une URL longue ou un identifiant composé au milieu d'un paragraphe peut élargir une colonne plus large que la page. Le correctif est une paire de propriétés avec des personnalités différentes, et l'utilisation des deux ensemble est toute l'astuce.
html { lang: en; }
p { hyphens: auto; overflow-wrap: anywhere; }Ce que chacun fait
- Tirets : insère automatiquement de vrais points de césure en utilisant le langage du document ; avec une mauvaise langue en HTML, le navigateur ne peut pas connaître les règles, alors définissez d'abord la langue.
- overflow-wrap : n'importe où permet une pause à l'intérieur de tout jeton incassable trop long, qui capture les URL, les hachages et les identifiants qu'aucun dictionnaire ne contient.
- n'importe où adoucit également la largeur minimale du contenu de la boîte, car le mot ne la force plus ; c'est ce qui permet à la colonne de rétrécir.
Le combo, pas non plus seul
La césure seule laisse l'URL intacte au bord de la ligne ; n'importe où, seul, brise les mots sans aucune marque visible. Ensemble, la prose obtient un trait d'union civilisé et les jetons de machine obtiennent une pause difficile, et aucun des deux ne se comporte mal là où ça fait mal.
Les pages multilingues ont une valeur supplémentaire : le navigateur coupe chaque paragraphe dans sa propre langue, de sorte qu'un superbe composé allemand et une courte phrase anglaise coexistent sans cas particulier.
Testez une fois avec un slug de quarante caractères dans une carte étroite. S'il est assis, la paire est déployée ; s'il plane, un attribut de langage ment.