Propriété word-break

La propriété word-break permet de couper les lettres d'un mot long sur une nouvelle ligne si ce mot ne tient pas dans la largeur du conteneur.

Syntaxe

sélecteur {
	word-break: break-all | keep-all | normal;
}

Valeur	Description
`break-all`	Force les mots longs à être coupés sur une nouvelle ligne si le mot ne tient pas dans le conteneur.
`keep-all`	Pour la césure des caractères idéographiques.
`normal`	Comportement standard : si un mot long ne tient 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.

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 {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

Et maintenant, les lettres qui ne tenaient pas seront simplement coupées sur la ligne suivante :

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

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

la propriété overflow-wrap,
qui permet également de couper les lettres d'un mot long sur une nouvelle ligne
la propriété hyphens,
qui active la césure des mots par syllabes
la propriété overflow,
qui rogne les parties qui dépassent des limites du bloc
la balise wbr,
qui implémente des césures facultatives en HTML
la balise br,
avec laquelle on peut forcer le texte à passer à la ligne