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

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section>  <div>    <p>      But ere she from the church-door stepped She smiled and told us why: 'It      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and      smiled, and passed it off Ere from the door she stept—    </p>  </div></section>

#example-element {  width: 16rem;}#example-element p {  border: 1px solid #c5c5c5;  padding: 0.75rem;  text-align: left;}

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 depre-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 etmax-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 avecnormal 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 :

Définition formelle

Syntaxe formelle

white-space =
normal|
pre|
pre-wrap|
pre-line|
<'white-space-collapse'>||<'text-wrap-mode'>||<'white-space-trim'>

<white-space-collapse> =
collapse|
discard|
preserve|
preserve-breaks|
preserve-spaces|
break-spaces

<text-wrap-mode> =
wrap|
nowrap

<white-space-trim> =
none|
discard-before||discard-after||discard-inner

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émentpre

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

Compatibilité des navigateurs

Voir aussi

• overflow-wrap
• word-break
• hyphens