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 initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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 pas pre{white-space:pre-wrap}. Voir par exemple white-space.
  • IE8 a introduit -ms-word-wrap comme synonyme de word-wrap. Il ne faut pas utiliser le préfixe -ms-.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,