Propriété white-space

La propriété white-space définit comment effectuer les sauts de ligne du texte, ainsi que comment afficher les espaces entre les mots et les sauts de ligne (endroits où la touche Entrée a été enfoncée lors de la saisie du code).

Syntaxe

sélecteur {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Valeurs

Valeur	Description
`nowrap`	Empêche le texte de passer à la ligne suivante, même s'il ne rentre pas dans la largeur du conteneur (dans ce cas, le texte dépassera simplement de ses limites). Cependant, l'ajout de la balise `br` forcera le texte à passer à la ligne suivante.
`pre`	Le texte est affiché tel qu'il a été saisi dans l'éditeur lors de la mise en page du site : avec tous les espaces et les retours à la ligne (si plusieurs espaces sont saisis dans le code, plusieurs espaces seront également affichés à l'écran). Dans ce cas, le navigateur ne passera pas le texte à la ligne suivante s'il ne rentre pas dans le conteneur - le texte dépassera simplement de ses limites. Analogue de la balise pre, mais contrairement à elle, ne change pas la police en une police à chasse fixe (pour la police à chasse fixe, voir la propriété `font-family`.
`pre-wrap`	La même chose que pre, la différence est que si le texte est trop long et ne rentre pas dans le conteneur - le navigateur le passera à la ligne suivante.
`pre-line`	Le navigateur ne prend en compte que les retours à la ligne dans le code HTML et ignore tout le reste (plusieurs espaces apparaîtront comme un seul, le navigateur place lui-même les sauts de ligne).
`normal`	Comportement standard : le navigateur place lui-même les sauts de ligne de manière à ce que les mots rentrent dans le conteneur. Plusieurs espaces dans le code apparaîtront comme un seul à l'écran.

Valeur par défaut : normal.

Exemple . Valeur nowrap

Dans cet exemple, le texte ne rentrera pas dans le conteneur et dépassera de ses limites, car la valeur nowrap est définie :

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Exemple . Valeur nowrap et balise br

Si on ajoute la balise br - le texte passera à la ligne suivante (exactement à l'endroit où se trouve br) :

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Exemple . Valeur pre

Dans cet exemple, le texte est affiché tel qu'il a été saisi dans l'éditeur de code HTML (avec toutes les indentations par la touche Tab, avec Entrée et ainsi de suite) :

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

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Exemple . Valeur pre-wrap

Et maintenant le texte est affiché tel qu'il a été saisi dans l'éditeur de code HTML, cependant, les parties qui dépassent sont passées à la ligne suivante :

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

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Voir aussi

les propriétés word-break et overflow-wrap,
qui permettent de passer les lettres d'un mot long à la ligne suivante
la propriété tab-size,
qui définit la taille de l'indentation créée par la touche Tab
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 pre,
qui affiche le texte tel qu'il a été saisi dans l'éditeur de code HTML