CSS Word-break ne fonctionne pas correctement dans Microsoft Edge
Il est venu à mon attention que dans Microsoft Edge il y a un problème avec certains attributs CSS, tels que:
Word-break: break-Word;
Existe-t-il un moyen de résoudre ce problème ou existe-t-il un moyen de contourner cela?
Word-break: break-Word est obsolète et n'est pas pris en charge par MS Edge ou MS IE. Voir documentation mozilla à ce sujet .
Word-break est pris en charge par MS Edge et MS IE Voici une liste de prise en charge navigateurs.
MS Edge et MS valides IE Word-break les propriétés sont:
Word-break: normal|break-all|keep-all|initial|inherit|unset;
Alternativement, la documentation de mozilla spécifie que overflow-wrap: break-Word; agit comme vous le souhaitez Word-break: break-Word Pour fonctionner.
Une autre solution consiste à utiliser le Word-wrap propriété qui à mon humble avis se comporte plus "intelligemment" - ce qui signifie que le saut de mot ne sera appliqué que lorsque le mot est trop long pour tenir dans une largeur de ligne, et ne sera pas appliqué aux mots qui peuvent simplement être déplacés en entier vers le suivant ligne.
CSS:
Word-wrap: break-Word;
Le Word-wrap La propriété est prise en charge par la plupart des navigateurs et, à ce jour, je peux certainement confirmer qu'elle fonctionne dans Microsoft Edge, IE11, Chrome, Firefox, Opera et Safari.
Remarque, Word-wrap a été renommé overflow-wrap, avec Word-wrap étant désormais un autre nom pour cette propriété, cependant overflow-wrap n'est pas compris par Microsoft Edge, donc utilisez Word-wrap pour la compatibilité entre les navigateurs.
Le fait est que vous devez fournir une largeur pour le conteneur/texte afin d'utiliser Word-break: break-Word propriété. La seule façon d'éviter cela est d'utiliser uniquement WebKit/Blink non officiel Word-wrap: break-Word propriété: https://caniuse.com/#search=Word-break
Utilisation -ms-Word-break: break-all; avant Word-break: break-Word;
Il convient également de mentionner que, tout en Word-break: break-Word; est propriété incorrecte, il s'agit d'une valeur de propriété non documentée et non standard dans WebKit. Cela fait que l'habillage Word se comporte comme Word-wrap: break-Word, mais fonctionne avec des largeurs dynamiques.
overflow-wrap: break-Word;
est le chemin à parcourir, il fonctionne également pour Edge maintenant.
Merci @David de l'avoir mentionné!