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 : À la différence de word-break, overflow-wrap créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.

À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée word-wrap. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en overflow-wrap et word-wrap est devenu un alias.

Syntaxe

/* Avec un mot-clé */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Valeurs globales */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

La propriété overflow-wrap peut être définie avec l'un des mots-clés suivants.

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 Module Level 3
La définition de 'overflow-wrap' dans cette spécification.
Version de travail Définition initiale

Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

Oui

11

Non

121

49

3.51

5.51

Oui

10.51

Oui

11

FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

11

?

Non

Oui1

49

41

Oui

Oui

11

?

1. Supported as word-wrap.

Voir aussi

Étiquettes et contributeurs liés au document

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