La propriété CSS white-space

Elle permet de contrôler l'affichage des espaces blancs et le retour à la ligne automatique. On l'applique plutôt dans une boite que dans une page entière et dans ce cas, elle peut aider à résoudre des problèmes de rendu.

Qu'est ce qu'un espace blanc?

Dans la grammaire CSS, cela représente un ou une séquences des caractères suivant (avec le code UTF):

• espace (U+0020),
• tabulation (U+0009),
• saut de ligne (U+000A),
• retour à la ligne (U+000D),
• saut de page (U+000C) .

Les codes espace em (U+2003) et espace idéographique (U+3000) n'en font pas partie. (Ref CSS 2.1).
Les codes de retour à la ligne ou saut de ligne ont le même effet dans une page web.

Et white-space est une propriété CSS qui précise comment traiter les espaces blanc avec un traitement approprié pour chaque caractère.

La propriété white-space

La valeur par défaut est normal. On peut lui assigner les valeurs suivantes

normal

Les blancs sont réduits à un seul.
Il y a retour à la ligne automatique en fonction de la largeur du conteneur.

pre

Interdit de fusionner les blancs.
Pas de retour à la ligne automatique.
Le retour à la ligne doit être demandé explicitement par un code \A.
Le retour à la ligne se fait aussi s'il figure dans le texte avec le code \D (commande clavier Entrée).

nowrap

Les blancs sont réduits à un seul.
Les codes de retour à la ligne sont ignorés.

pre-wrap

Ne fusionne pas les blancs.
Retour à la ligne automatique en fonction de la largeur du conteneur.
Retour à la ligne avec le code \D ou \A.

pre-line

Les blancs sont réduits à un seul.
Retour à la ligne automatique en fonction de la largeur du conteneur.
Retour à la ligne avec le code \D ou \A.

Dans une balise <pre>, la propriété white-space est implicitement pre.

Récapitulation

• Les codes de tabulation, retour à la ligne (sans balise <br>), espace entourant un code \A sont ignorés avec les valeurs:
  normal, nowrap, pre-line.
• Les espaces sont réduits à un seul, sauf avec les valeurs:
  pre, pre-wrap.
• Les espaces en début et en fin de ligne sont ignorés avec les valeurs:
  normal, nowrap, pre-line.

Démonstration

Le texte suivant contient une séquence d'espaces et un retour à la ligne imposé par l'insertion du code \D, sans balise de retour à la ligne. On a aussi placé des espaces blancs en début et en fin de ligne.

Voici le texte original:

<p>    Ce texte de    démonstration 
contient des séquences d'espaces et un retour à la ligne.     </p>

Il est rendu comme ci-dessous selon les valeurs de la propriété white-space:

pre (la propriété white-space:pre):

Ce texte de démonstration contient des séquences d'espaces et un retour à la ligne.

normal:

Ce texte de démonstration contient des séquences d'espaces et un retour à la ligne.

nowrap:

Ce texte de démonstration contient des séquences d'espaces et un retour à la ligne.

pre-wrap:

Ce texte de démonstration contient des séquences d'espaces et un retour à la ligne.

pre-line:

Ce texte de démonstration contient des séquences d'espaces et un retour à la ligne.

Les démos utilisent le code suivant, avec les valeurs différentes pour la propriété white-space:

<p style="white-space:normal;border:1px solid black;width:320px">    Ce texte de    d&eacute;monstration 
contient des s&eacute;quences d'espaces et un retour &agrave; la ligne.</p>

Comment insérer des tabulations dans une page HTML

Comment insérer des tabulations dans une page Web? Cela se fait avec la propriété white-space:pre, que l'on peut appliquer à toute balise.

La touche TAB du clavier insère un code \T dans le contenu des pages, mais par défaut il est converti en espace et les séquences d'espaces sont réduites à un seul.
Pour conserver ce code qui est correctement affiché par les navigateurs, il faut changer le mode de traitement des espaces, ce qui se fait avec white-space.

Pour que cela fonctionne mieux, un conseil: positionner les données avec un seul caractère, par exemple:

x x x

Puis remplacer le caractère par le texte final et éventuellement supprimer les tabulations excédentaires.

white-space:normal (par défaut)

Ce texte contient des tabulations:
un un2 un3 deux deux3 deux3 trois trois2 trois3 quatre quatre2 quatre3

white-space:pre

Ce texte contient des tabulations: un un2 un3 deux deux2 deux3 trois trois2 trois3 quatre quatre2 quatre3

Code source:

<div class="wspre">
Ce texte contient des tabulations:
   un    un2       un3
   deux  deux2     deux3
   trois  trois2   trois3
   quatre quatre2  quatre3
</div>

Documents

• Recommandation CSS 2 du W3C.