overflow-wrap

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.

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

Compatibilité des navigateurs

• 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

• La documentation originale de Microsoft : MSDN Microsoft library word-wrap (en anglais)
• word-break