Rhaa®, faut que j’arrive à retenir ça, je perds un temps fou à chaque fois avec les break-word.

En CSS, break-work permet de dire au navigateur qu’il doit couper les mots quand ils dépassent de leur conteneur. Voir là : https://developer.mozilla.org/fr/docs/Web/CSS/overflow-wrap (btw la propriété a changé de nom depuis 5 ans).

==

Je sais que sur Firefox, pour que ceci fonctionne également avec PRE et CODE, il faut le spécifier directement sur ces éléments (dont les styles internes sont en conflit avec break-word) :

 pre { white-space: pre-wrap; }

(voir là : https://lehollandaisvolant.net/?id=20120930215732 )
==
Maintenant, et ça c’est le lien : tout ceci entre également en conflit avec les boîtes flexibles.

Quand on a une boîte est en "flex" (donc son parent en "display:flex;"), alors la boîte s’adapte à son contenu et à son contenant. Le contenant on s’en fout ici, mais si le contenu est un mot super-long qui risque de dépasse, alors tout ça ne marche plus : en effet, les spécifications CSS disent que la boîte doit avoir une largeur minimale égale au contenu.

Du coup, la boîte reste trop large et le mot trop long ne se coupe pas.

Pour contrer ça, il faut spécifier une largeur minimale de 0px à la boîte avec le "flex".

Du coup j’ai fait un codepen : https://codepen.io/lehollandaisvolant/pen/MvOYxp

— (permalink)