La propriété overflow-wrap
est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.
Note : Bien qu'étant une extension propriétaire de Microsoft (sans-préfixe), la propriété
word-wrap
a été renommée en overflow-wrap
dans les brouillons suivants de la spécification CSS3 Text. . word-wrap
est désormais un nom alternatif pour désigner overflow-wrap
. Les versions stables de Google Chrome et Opera supportent cette « nouvelle » syntaxe.Valeur initiale | normal |
---|---|
Applicabilité | tous les éléments |
Héritée | oui |
Média | visuel |
Valeur calculée | comme spécifié |
Animable | non |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Avec un mot-clé */ overflow-wrap: normal; overflow-wrap: break-word; /* Valeurs globales */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset;
Valeurs
normal
- Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.
break-word
- Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne.
-
Syntaxe formelle
normal | break-word
Exemples
Sans césure
HTML
<p> FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften) </p>
CSS
p { width:13em; background:gold; }
Résultat obtenu
Avec word-wrap: break-word
HTML
<p> FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften) </p>
CSS
p { width:13em; background:gold; overflow-wrap:break-word; }
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Text Level 3 La définition de 'overflow-wrap' dans cette spécification. |
Version de travail | Définition initiale |
Compatibilité des navigateurs
Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple (en tant que word-wrap ) |
3.5 (1.9.1) | 1.0 | 5.5 | 10.5 | 1.0 |
overflow-wrap |
49 (49) | (Oui) | ? | (Oui) | ? |
Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple (en tant que word-wrap ) |
1.0 (1.9.1) | 1.0 | ? | ? | 1.0 |
overflow-wrap |
49 (49) | (Oui) | ? | (Oui) | ? |
word-wrap:break-word
peut être utilisé pour contourner le fait que IE 5.5 à 7 ne gèrent paspre{white-space:pre-wrap}.
Voir par exemplewhite-space
.- IE8 a introduit
-ms-word-wrap
comme synonyme deword-wrap
. Il ne faut pas utiliser le préfixe-ms-
.
Voir aussi
- La documentation originale de Microsoft : MSDN Microsoft library word-wrap (en anglais)
word-break
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
patrickfournier,
fscholz,
Sebastianz,
PofMagicfingers,
teoli,
BiAiB,
philippe97,
FredB,
Delapouite
Dernière mise à jour par :
SphinxKnight,