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

CSS

p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

HTML

<p class="normal">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>normal</code>)</p>
<p class="overflow-wrap">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>overflow-wrap</code>)</p>
<p class="word-break">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p class="hyphens">They say the fishing is excellent at 
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, 
though I've never been there myself. (<code>hyphens</code>, sans attribut <code>lang</code>)</p>
<p class="hyphens" lang="en">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, utilisant les règles anglaises)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, utilisant les règles allemandes)</p>

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet Oui
Support complet Oui
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Edge Support complet 18
Support complet 18
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Firefox Support complet 49
Support complet 49
Support complet 3.5
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
IE Support complet 5.5
Autre nom
Support complet 5.5
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Opera Support complet Oui
Support complet Oui
Support complet 10.5
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Safari Support complet Oui
Support complet Oui
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
WebView Android Support complet Oui
Support complet Oui
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Chrome Android ? Edge Mobile Support complet Oui
Autre nom
Support complet Oui
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Firefox Android Support complet 49
Support complet 49
Support complet 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Opera Android Support complet OuiSafari iOS Support complet Oui
Support complet Oui
Support complet 1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : word-wrap
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

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