white-space

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS white-space détermine comment les espaces blancs à l'intérieur d'un élément sont gérés.

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 class="default-example" id="default-example">
  <div id="example-element">
    <p>
      Mais avant qu'elle ne quitte la porte de l'église, elle sourit et nous
      expliqua pourquoi&nbsp;: «&nbsp;C'était la malédiction d'une femme
      méchante,&nbsp;» dit-elle, «&nbsp;et qu'importe&nbsp;?&nbsp;» Elle sourit,
      et sourit encore, et passa outre Avant de quitter la porte—
    </p>
  </div>
</section>

#example-element {
  width: 16rem;
}

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

La propriété définit deux choses :

Si et comment les espaces blancs sont regroupés.
Si et comment les lignes se replient.

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

Propriétés constitutives

Cette propriété est un raccourci pour les propriétés CSS suivantes :

Note : La spécification définit une troisième propriété constitutive : white-space-trim, qui n'est encore implémentée dans aucun navigateur.

Syntaxe

css

/* Valeurs avec un mot-clé */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Valeurs raccourcies de white-space-collapse et text-wrap-mode */
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;
white-space: preserve nowrap;

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

Les valeurs de la propriété white-space peuvent être définies par un ou deux mots-clés représentant les valeurs des propriétés white-space-collapse et text-wrap-mode, ou par les mots-clés spéciaux suivants :

normal: Les séquences d'espaces blancs sont regroupées. Les caractères de saut de ligne dans la source sont traités comme les autres espaces blancs. Les lignes sont coupées selon les besoins pour remplir les boîtes de ligne. Équivaut à collapse wrap.
pre: Les séquences d'espaces blancs sont préservées. Les lignes ne sont cassées qu'aux caractères de saut de ligne dans la source et aux éléments HTML <br>. Équivaut à preserve nowrap.
pre-wrap: Les séquences d'espaces blancs sont préservées. Les lignes sont cassées aux caractères de saut de ligne, aux <br>, et selon les besoins pour remplir les boîtes de ligne. Équivaut à preserve wrap.
pre-line: Les séquences d'espaces blancs sont regroupées. Les lignes sont cassées aux caractères de saut de ligne, aux <br>, et selon les besoins pour remplir les boîtes de ligne. Équivaut à preserve-breaks wrap.

Note : La propriété white-space en tant que raccourci est une fonctionnalité relativement récente (voir la compatibilité des navigateurs). À l'origine, elle possédait six valeurs par mot-clé ; désormais, la valeur nowrap est interprétée comme une valeur pour text-wrap-mode, tandis que la valeur break-spaces est interprétée comme une valeur pour white-space-collapse. Les quatre mots-clés ci‑dessus restent spécifiques à white-space, mais ils ont des équivalents en version longue. Le fait de faire de white-space un raccourci étend les valeurs acceptables à encore plus de mots-clés et de combinaisons, tels que wrap et collapse.

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	Séparateurs d'espaces en fin de ligne
`normal`	Regroupées	Regroupés	Oui	Retirés	Conservés
`nowrap`	Regroupées	Regroupés	Non	Retirés	Pas de retour à la ligne
`pre`	Préservées	Préservés	Non	Conservés	Conservés
`pre-wrap`	Préservées	Préservés	Oui	Conservés	Conservés
`pre-line`	Préservées	Regroupés	Oui	Retirés	Conservés

Une tabulation par défaut correspond à 8 espaces et peut être configurée à l'aide de la propriété tab-size. Dans le cas des valeurs normal, nowrap et pre-line, chaque tabulation est convertie en un caractère espace (U+0020).

Note : Il existe une distinction entre espaces et autres séparateurs d'espaces. Ceux-ci sont définis comme suit :

espaces: Les espaces (U+0020), les tabulations (U+0009) et les sauts de segment (comme les nouvelles lignes).
autres séparateurs d'espaces: Tous les autres séparateurs d'espaces définis dans Unicode, autres que ceux déjà définis comme espaces.

Lorsque l'on dit que les espaces blancs pendent, cela peut affecter la taille de la boîte lorsqu'elle est mesurée pour le dimensionnement intrinsèque.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

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

css

code {
  white-space: pre;
}

Passer automatique à la ligne dans un élément `<pre>`

css

pre {
  white-space: pre-wrap;
}

En action

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: gainsboro;
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

Contrôler le passage à la ligne dans les tableaux

HTML

html

<table>
  <tbody>
    <tr>
      <td></td>
      <td>Contenu très long qui se divise</td>
      <td class="nw">Contenu très long qui ne se divise pas</td>
    </tr>
    <tr>
      <td class="nw">white-space:</td>
      <td>normal</td>
      <td>nowrap</td>
    </tr>
  </tbody>
</table>

CSS

css

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Résultat

Plusieurs lignes dans un élément de texte SVG

La propriété CSS white-space peut être utilisée pour créer plusieurs lignes dans un élément <text>, qui ne se divise pas par défaut.

HTML

Le texte à l'intérieur de l'élément <text> doit être divisé en plusieurs lignes pour que les nouvelles lignes soient détectées. Après la première ligne, le reste doit avoir ses espaces blancs supprimés.

html

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Voici un paragraphe en français
qui est divisé en plusieurs lignes
dans le code source afin qu'il puisse
être plus facilement lu et édité
dans un éditeur de texte.
  </text>
</svg>