white-space en CSS : comprendre pourquoi vos espaces disparaissent

Tapez trois espaces à la suite dans un fichier HTML, ou allez à la ligne au milieu d'un paragraphe pour que le code source reste lisible : le navigateur affiche pourtant un seul espace, comme si rien de tout cela n'existait. Ce comportement, souvent découvert par surprise, est réglé par une seule propriété : white-space.

Elle décide de la façon dont les espaces, les tabulations et les retours à la ligne du code source sont traités au moment de l'affichage, et de la possibilité ou non pour le texte de revenir à la ligne quand il dépasse la largeur disponible.

Définition

white-space contrôle deux comportements distincts : la fusion des espaces successifs en un seul, et le retour à la ligne automatique du texte quand il atteint le bord de sa boîte.

p {
  white-space: normal; /* comportement par défaut */
}

.etiquette {
  white-space: nowrap; /* jamais de retour à la ligne */
}

Le comportement par défaut : la fusion des espaces

Avec normal, la valeur par défaut de tout élément, le navigateur applique deux règles à la fois : il fusionne toute suite d'espaces, de tabulations et de retours à la ligne du code source en un seul espace visible, et il coupe automatiquement le texte à la ligne suivante dès qu'il dépasse la largeur de sa boîte.

<!-- Dans le HTML -->
<p>Bonjour        le    monde</p>

<!-- Ce qui s'affiche : "Bonjour le monde", un seul espace -->

C'est cette fusion qui permet d'indenter librement son code HTML pour le rendre lisible, sans craindre que ces espaces d'indentation ne s'affichent réellement à l'écran.

Les autres valeurs et leur usage

Chaque valeur combine différemment les deux comportements : fusionner ou préserver les espaces, autoriser ou interdire le retour à la ligne.

pre reproduit le comportement de la balise <pre>, utile pour afficher un bloc de code où chaque espace et chaque retour à la ligne du code source compte réellement. pre-line est plus rare mais pratique pour un texte saisi par un visiteur dans un champ, où seuls les retours à la ligne volontaires doivent être respectés, sans conserver les espaces multiples.

nowrap, la première étape d'un texte tronqué

white-space: nowrap; empêche tout retour à la ligne, ce qui force le texte à continuer sur une seule ligne même s'il dépasse largement la largeur de sa boîte. Utilisée seule, cette valeur fait simplement déborder le texte visuellement.

Bonnes pratiques

Réservez pre et ses variantes aux contenus où la mise en forme du texte source compte réellement, comme un extrait de code ou un texte préformaté envoyé par un système externe. Pour du contenu éditorial classique, normal reste le bon choix par défaut, quitte à ajouter nowrap ponctuellement sur un élément précis, comme un libellé qui ne doit jamais se couper en deux lignes.

Questions fréquentes

C'est le comportement par défaut de white-space: normal;, hérité par tout élément qui ne précise rien. Le navigateur fusionne systématiquement toute suite d'espaces en un seul, ce qui permet d'indenter le code source librement sans influencer le rendu final à l'écran.

L'entité HTML  , l'espace insécable, n'est pas traitée comme un espace ordinaire par le navigateur et échappe à la fusion. C'est le moyen classique de garder deux mots collés sur la même ligne, par exemple un nombre et son unité, sans changer la valeur de white-space.

pre préserve les espaces et interdit tout retour à la ligne automatique, ce qui fait déborder le texte si une ligne est trop longue. pre-wrap préserve les mêmes espaces, mais autorise le texte à revenir à la ligne pour rester dans sa boîte, un compromis souvent préférable pour afficher un bloc de code sur mobile.

Non, seule utilisée, cette valeur fait déborder le texte hors de sa boîte au lieu de le couper. Un texte réellement tronqué avec des points de suspension nécessite de combiner trois propriétés ensemble, overflow, white-space et text-overflow et l'ellipsis.