La overflow-wrappropriété en CSS vous permet de spécifier que le navigateur peut couper une ligne de texte à l'intérieur de l'élément ciblé sur plusieurs lignes dans un endroit autrement incassable. Cela permet d'éviter qu'une chaîne de texte inhabituellement longue ne cause des problèmes de mise en page en raison d'un débordement.
.example ( overflow-wrap: break-word; )Valeurs
normal: le défaut. Le navigateur coupera les lignes selon les règles normales de saut de ligne. Les mots ou les chaînes ininterrompues ne seront pas cassés, même s'ils débordent du conteneur.break-word: les mots ou chaînes de caractères trop volumineux pour tenir dans leur conteneur se casseront à un endroit arbitraire pour forcer un saut de ligne. Un caractère tiret ne sera pas inséré, même si lahyphenspropriété est utilisée.inherit: l'élément ciblé doit hériter de la valeur de laoverflow-wrappropriété définie sur son parent immédiat.
La démo ci-dessous a un bouton bascule qui vous permet de basculer entre normalet break-word.
Voir la démo Pen overflow-wrap / word-wrap par Louis Lazaris (@impressivewebs) sur CodePen.
Pour illustrer le problème qui overflow-wraptente de résoudre, la démo utilise un mot inhabituellement long dans un conteneur relativement petit. Lorsque vous activez cette option break-word, le mot est interrompu pour tenir compte du petit espace disponible, comme si le mot était composé de plusieurs mots.
Une chaîne de caractères d'espace insécable ( ) serait traitée de la même manière et se briserait également à un endroit approprié.
overflow-wrapest utile lorsqu'il est appliqué à des éléments qui contiennent du contenu généré par l'utilisateur non modéré (comme les sections de commentaires). Cela peut empêcher les longues URL et autres chaînes de texte ininterrompues (par exemple le vandalisme) de briser la mise en page d'une page Web.
Similitudes avec la word-breakpropriété
overflow-wrapet word-breakse comportent de manière très similaire et peuvent être utilisés pour résoudre des problèmes similaires. Un résumé de base de la différence, comme expliqué dans la spécification CSS est:
overflow-wrapest généralement utilisé pour éviter les problèmes avec les longues chaînes provoquant des mises en page cassées en raison du texte circulant à l'extérieur d'un conteneur.word-breakspécifie les opportunités de retour en douceur entre les lettres couramment associées à des langues telles que le chinois, le japonais et le coréen (CJK).
Après avoir décrit des exemples d' word-breakutilisation du contenu CJK, la spécification dit: «Pour activer des opportunités de pause supplémentaires uniquement en cas de dépassement de capacité, voir overflow-wrap».
À partir de là, nous pouvons supposer qu'il word-breakest préférable de l'utiliser avec un contenu non anglais qui nécessite des règles de rupture de mots spécifiques, et qui pourrait être entrecoupé de contenu anglais, tout en overflow-wrapdevrait être utilisé pour éviter les mises en page brisées en raison de longues chaînes, quelle que soit la langue utilisée. .
La word-wrappropriété historique
overflow-wrapest le nom standard de son prédécesseur, la word-wrappropriété. word-wrapétait à l'origine une fonctionnalité exclusive d'Internet Explorer qui a finalement été prise en charge par tous les navigateurs bien qu'elle ne soit pas une norme.
word-wrapaccepte les mêmes valeurs que overflow-wrapet se comporte de la même manière. Selon la spécification, les navigateurs «doivent traiter word-wrapcomme un nom alternatif pour la overflow-wrappropriété, comme s'il s'agissait d'un raccourci de overflow-wrap«. En outre, tous les agents utilisateurs doivent prendre en charge word-wrapindéfiniment, pour des raisons d'héritage.
Les deux overflow-wrapet word-wrappasseront la validation CSS tant que le validateur est configuré pour tester par rapport à CSS3 ou supérieur (actuellement la valeur par défaut).
En rapport
- saut de mots
- traits d'union
- espace blanc
- Gestion des mots longs et des URL
Plus d'information
- Word-Wrap: une propriété CSS3 qui fonctionne dans tous les navigateurs
- Emballage de débordement sur W3C
- Discussion sur Stack Overflow sur
word-breakvs.overflow-wrap
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
La prise en charge «partielle» indiquée ci-dessus est due à des navigateurs plus anciens prenant en charge word-wrapmais pas overflow-wrap. L'utilisation des deux peut garantir la compatibilité ascendante.
La version provisoire de l'éditeur de la spécification W3C comprend une nouvelle valeur appelée break-spacesqui traite des séquences de caractères d'espacement «préservés». Il n'y a pas de prise en charge connue du navigateur pour cette fonctionnalité et elle n'est pas incluse dans la version préliminaire de travail de la spécification.