Propriété overflow-wrap

La propriété overflow-wrap permet de transférer les lettres d'un mot long sur une nouvelle ligne, si ce mot ne rentre pas dans la largeur du conteneur.

Syntaxe

csssélecteur {
  overflow-wrap: break-word | normal;
}

Valeurs

Valeur par défaut : normal.

Exemple . Valeur normal

Dans cet exemple, un mot très long ne tiendra pas dans le conteneur et dépassera de ses limites (tout en commençant sur une nouvelle ligne) :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Exemple . Valeur break-word

Et maintenant, les lettres qui ne tenaient pas, seront simplement reportées sur la ligne suivante (tout en commençant le mot long sur une nouvelle ligne) :

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

Voir aussi