.'>

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):

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

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.

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

© 2010-2012 Xul.fr