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>

Compatibilité

Ces valeurs sont reconnues par tous les navigateurs, sauf Internet Explorer 8 et précédents.

• pre-wrap et pre-line ne sont pas reconnues par Internet Explorer.
• nowrap ne déborde pas du conteneur avec IE.
• Aucune valeur ne permet de conserver des blancs en début et fin de ligne sous IE.

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.