Propriété CSS word-wrap

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>

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>

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.

Support de Navigateurs

23.0+ 49.0+ 6.1+ 12.1+


Trouvez-vous cela utile?

Articles Associées