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.

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 initiale | `normal` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrè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 3 # white-space-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `overflow-wrap`
* `word-break`
* `hyphens`