white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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.

Exemple interactif

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

Syntaxe

css
/* 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.

Définition formelle

Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

white-space = 
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

Exemples

Exemple simple

HTML

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

css
code {
  white-space: pre;
}

Résultat

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

HTML

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

CSS

css
pre {
  word-wrap: break-word; /* IE 5.5-7 */
  white-space: pre-wrap; /* current browsers */
}

Résultat

Spécifications

Specification
CSS Text Module Level 4
# white-space-property
Scalable Vector Graphics (SVG) 2
# TextWhiteSpace

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
white-space
break-spaces
normal
nowrap
pre
pre-line
pre-wrap
Accepts shorthand values
Experimental
On SVG elements
Support on <textarea>

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi