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

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

Valeurs

Valeur	Description
`break-word`	Force les mots longs à être coupés sur une nouvelle ligne, si ce mot ne tient pas dans le conteneur. Dans ce cas, le mot commencera sur une nouvelle ligne.
`normal`	Comportement standard : si un mot long ne rentre pas en largeur dans le conteneur - il dépassera simplement de ses limites (tout en commençant sur une nouvelle ligne).

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) :

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

#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) :

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

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

Voir aussi

la propriété word-break,
qui permet également de reporter les lettres d'un mot long sur une nouvelle ligne
la propriété word-wrap,
qui est le nom obsolète de la propriété overflow-wrap
la propriété hyphens,
qui active les césures des mots par syllabes
la balise wbr,
qui implémente les césures conditionnelles via HTML
la balise br,
avec laquelle on peut forcer le texte à passer à la ligne