Propriété CSS word-wrap

❮ Précédent Suivant ❯

La propriété word-wrap permet de casser des lignes aux mots pour les insérer dans leur conteneur. Cette propriété même permet de casser les mots qui sont incassables.

La propriété word-wrap n'a un effet que lorsque la propriété white-space permet casser les mots.

Dans la spécification CSS3, la propriété word-wrap est appellée overflow-wrap.

Valeur initiale	normal
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.wordWrap = "break-word";

Syntaxe

word-wrap: normal | break-word | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 120px; 
      border: 1px solid #666;
      word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété word-wrap </h2>
    <div> Lorem Ipsum est <strong>simplementsimplementsimplementsimplement</strong> du faux texte employé dans la composition et la mise en page avant <strong>impressionimpressionimpressionimpression</strong>.</div>
  </body>
</html>

Essayez-vous-même!

Un exemple avec la valeur "break-word":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 120px; 
      border: 1px solid #666;
      word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété word-wrap</h2>
    <div> Lorem Ipsum est <strong>simplementsimplementsimplementsimplement</strong> du faux texte employé dans la composition et la mise en page avant <strong>impressionimpressionimpressionimpression</strong>.</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
normal	Casse les mots aux points où les casser est permis. C'est la valeur initiale de cette propriété.
break-word	Fait casser les mots incassables.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.