Propriété CSS word-wrap

La propriété word-wrap permet de couper les mots longs pour qu'ils tiennent dans leur conteneur. Cette propriété autorise la coupure de mots qui débordent autrement.

La propriété contrôle la gestion des mots longs lorsqu'ils dépassent la largeur du conteneur. Elle n'accepte pas de valeurs positives ou négatives ; celles-ci appartiennent à la propriété word-spacing. Lorsqu'elle est définie sur normal, les mots ne sont coupés qu'aux points de césure autorisés.

La propriété word-wrap fait partie des propriétés CSS3.

Elle n'a d'effet que lorsque la propriété white-space autorise le retour à la ligne.

INFO

Dans le CSS moderne, word-wrap est un alias de la propriété overflow-wrap.

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

Syntaxe

Valeurs CSS word-wrap

css

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

Exemple de la propriété word-wrap avec la valeur "normal" :

Exemple de code CSS word-wrap

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS word-wrap property

Exemple de la propriété word-wrap avec la valeur "break-word" :

Exemple CSS word-wrap break-word

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
normal	Coupe les mots uniquement aux points de césure autorisés. C'est la valeur par défaut.
break-word	Autorise la coupure des mots non coupables s'ils dépassent la largeur du conteneur.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle affirmation est correcte concernant la propriété CSS word-wrap ?

C'est une propriété animable.Elle n'a d'effet que lorsque la propriété white-space autorise le retour à la ligne.Sa valeur break-words coupe les mots aux points de césure autorisés.

Propriété CSS word-wrap ​

Syntaxe ​

Exemple de la propriété word-wrap avec la valeur "normal" : ​

Résultat ​

Exemple de la propriété word-wrap avec la valeur "break-word" : ​

Valeurs ​