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.

Note : Afin d'obtenir une césure au sein des mots, il faudra utiliser overflow-wrap, word-break ou bien hyphens.

Syntaxe

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

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

La propriété white-space se définit avec l'un des mots-clés suivants.

Valeurs

break-spaces
Le comportement est identique à celui de pre-wrap mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (min-content et max-content).
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 Espaces en fin de ligne
normal Regroupées Regroupés Oui Retirés
nowrap Regroupées Regroupés Non Retirés
pre Préservées Préservés Non Conservés
pre-wrap Préservées Préservés Oui Suspendus
pre-line Préservées Regroupés Oui Retirés
break-spaces Préservées Regroupés Oui Passent à la ligne.

Syntaxe formelle

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

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: pre-wrap;      /* current browsers */
}

Résultat

Spécifications

Spécification État Commentaires
CSS Text Module 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 et ajout de break-spaces.
CSS Level 2 (Revision 1)
La définition de 'white-space' dans cette spécification.
Recommendation Définition initiale.
Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
white-spaceChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 5.5Opera Support complet 4Safari Support complet 1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android ?
break-spacesChrome Support complet 76Edge Aucun support NonFirefox Support complet 69IE Aucun support NonOpera Support complet 62Safari Aucun support NonWebView Android Support complet 76Chrome Android Support complet 76Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
preChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 4Safari Support complet 1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android ?
pre-lineChrome Support complet 1Edge Support complet 12Firefox Support complet 3.5IE Support complet 8Opera Support complet 9.5Safari Support complet 3WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android ?
pre-wrapChrome Support complet 1Edge Support complet 12Firefox Support complet 3
Support complet 3
Aucun support 1 — 3.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 8
Notes
Support complet 8
Notes
Notes From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements.
Opera Support complet 8Safari Support complet 3WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 1Samsung Internet Android ?
Support in SVGChrome Aucun support NonEdge Support complet 12Firefox Support complet 36IE Support complet 10Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 36Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Support on <textarea>Chrome Support complet 1Edge Support complet 12Firefox Support complet 36IE Support complet 5.5Opera Support complet 4Safari Support complet 1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 36Opera Android ? Safari iOS Support complet 1Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi