Mozilla wants to hear from developers like you. http://www.surveygizmo.com/s3/2737536/440b74c45e94?a=mdn

La propriété word-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é */
word-wrap: normal;
word-wrap: break-word;

/* Valeurs globales */
word-wrap: inherit;
word-wrap: initial;
word-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;
  word-wrap:break-word;
}

Résultat

Spécifications

Spécification Statut Commentaires
CSS Text Level 3
La définition de 'word-wrap' dans cette spécification.
Version de travail Définition initiale

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support simple 3.5 (1.9.1) 1.0 5.5 10.5 1.0
Fonctionnalité Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 (1.9.1) 1.0 ? ? 1.0
  • 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,