white-space

La propriété white-space est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.

Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Avec un mot-clé */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Valeurs globales */
white-space: inherit;
white-space: initial;
white-space: unset;

Valeurs

normal
Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.
nowrap
Les blancs sont regroupés comme avec normal mais les passages à la ligne automatiques sont supprimés.
pre
Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments <br>.
pre-wrap
Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec <br> et on a des passages à la ligne automatiques.
pre-line
Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments <br> et on a des passages à la ligne automatiques.

Le tableau qui suit résume le comportement des différentes valeurs :

  Nouvelles lignes Espaces et tabulations Retour à la ligne automatique
normal Regroupées Regroupés Oui
nowrap Regroupées Regroupés Non
pre Préservées Préservés Non
pre-wrap Préservées Préservés Oui
pre-line Préservées Regroupés Oui

Syntaxe formelle

normal | pre | nowrap | pre-wrap | pre-line

Exemples

Exemple simple

HTML

<code>
var coucou = function(){
  // on notera l'indentation
  // avec deux espaces
  console.log("Hello World");

  var toto = function(){
    // ici 4 espaces
    console.log("Toto");
  }
  toto();
}
</code>

CSS

code { 
  white-space: pre; 
}

Résultat

Passage automatique à la ligne dans un élément pre

HTML

<pre>
function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
  console.log("Tout ça pour ça");
}
</pre>

CSS

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */
}

Résultat

Spécifications

Spécification Statut Commentaires
CSS Text Level 3
La définition de 'white-space' dans cette spécification.
Version de travail Définition de l'algorithme des césures de ligne.
CSS Level 2 (Revision 1)
La définition de 'white-space' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (normal et nowrap) 1.0 1.0 (1.7 ou moins) 5.5[1] 4.0 1.0 (85)
pre 1.0 1.0 6.0 4.0 1.0 (85)
pre-wrap 1.0 1.0 (1.7 ou moins)-moz
3.0 (1.9)
8.0 8.0 3.0 (522)
pre-line 1.0 3.5 (1.9.1) 8.0 9.5 3.0 (522)
Support pour <textarea> 1.0 36 (36) 5.5 4.0 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

[1] Internet Explorer 5.5 et les versions supérieures supportent word-wrap: break-word;.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, nykola, fscholz, teoli, claudepache, FredB, nonos
 Dernière mise à jour par : SphinxKnight,