La propriété CSS white-space

La propriété CSS white-space contrôle deux choses à la fois : comment les séquences d'espaces blancs (espaces, tabulations et sauts de ligne écrits dans le source HTML) sont réduites ou préservées, et si le texte revient à la ligne lorsqu'il atteint le bord de son conteneur.

Par défaut, les navigateurs traitent les espaces blancs de façon agressive. Toute suite d'espaces, de tabulations ou de sauts de ligne dans votre balisage est réduite à un seul espace, et le texte revient à la ligne selon les besoins pour s'adapter à sa boîte. C'est pourquoi ceci :

<p>Hello       world</p>

s'affiche comme Hello world avec un seul espace, quel que soit le nombre d'espaces saisis. La propriété white-space vous permet de modifier ce comportement — par exemple, pour conserver la mise en forme d'un code source, préserver les sauts de ligne d'un poème, ou empêcher une étiquette de se couper sur deux lignes.

Quand l'utiliser

nowrap — maintient l'étiquette d'un bouton, la cellule d'un tableau ou un élément de navigation sur une seule ligne.
pre / pre-wrap — affiche du texte préformaté (code, art ASCII, indentation) où les espaces et sauts de ligne que vous avez saisis doivent être conservés. C'est ce qu'utilise l'élément <pre> par défaut.
pre-line — préserve les sauts de ligne écrits dans le source tout en réduisant les espaces supplémentaires — pratique pour des adresses ou de courts messages multi-lignes stockés en texte brut.

Si votre objectif est de couper des mots longs et insécables (comme une URL) plutôt que de contrôler les espaces blancs du source, utilisez plutôt overflow-wrap ou word-break.

Comportement de chaque valeur

Le tableau ci-dessous résume comment chaque valeur traite les nouvelles lignes, les espaces et tabulations, et le retour à la ligne du texte.

Valeur	Nouvelles lignes	Espaces et tabulations	Retour à la ligne
`normal`	Réduites	Réduits	Oui
`nowrap`	Réduites	Réduits	Non
`pre`	Préservées	Préservés	Non
`pre-wrap`	Préservées	Préservés	Oui
`pre-line`	Préservées	Réduits	Oui
`break-spaces`	Préservées	Préservés	Oui (également après chaque espace préservé)

Valeur initiale	normal
S'applique à	Les éléments de niveau inline et les cellules de tableau, ainsi qu'à ::first-letter et ::first-line.
Hérité	Non.
Animable	Oui. La propriété white-space est animable.
Version	CSS1
Syntaxe DOM	object.style.whiteSpace = "nowrap";

Syntaxe

Syntaxe de la propriété CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;

Exemple de la propriété white-space avec la valeur "normal"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Avec normal, les séquences d'espaces blancs dans le source sont réduites à des espaces simples et le texte revient à la ligne dès qu'il atteint le bord du <div>.

Exemple de la propriété white-space avec la valeur "nowrap"

Avec nowrap, le texte réduit toujours les espaces blancs mais ne revient jamais à la ligne. Il déborde sur le côté du conteneur au lieu de passer à une deuxième ligne, ce qui provoque généralement un dépassement horizontal (souvent associé à text-overflow pour ajouter des points de suspension).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété white-space avec la valeur "pre-line"

Avec pre-line, les suites d'espaces sont toujours réduites à un seul, mais les sauts de ligne écrits dans le source HTML sont préservés et le texte continue de revenir à la ligne selon les besoins.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, vous pouvez voir la différence entre les valeurs nowrap, normal et pre-wrap côte à côte.

Exemple de la propriété white-space avec trois valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-wrap;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
normal	Coupe les lignes si nécessaire pour remplir les boîtes de ligne. Il s'agit de la valeur par défaut de cette propriété.	Essayer »
nowrap	Avec cette valeur, le texte ne reviendra jamais à la ligne suivante.	Essayer »
pre	Préserve à la fois les espaces et les sauts de ligne. Le texte ne reviendra pas à la ligne suivante.	Essayer »
pre-line	Les séquences d'espaces blancs se réduisent à un seul espace. Le texte revient à la ligne si nécessaire et aux sauts de ligne.	Essayer »
pre-wrap	Les espaces blancs sont préservés par le navigateur. Le texte revient à la ligne si nécessaire et aux sauts de ligne.	Essayer »
break-spaces	Comportement identique à "pre-wrap", sauf que : toute séquence d'espaces blancs préservés occupe toujours de l'espace (y compris en fin de ligne), une opportunité de saut de ligne existe après chaque espace blanc préservé, et ces espaces affectent la taille intrinsèque de la boîte au lieu d'être suspendus.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite la propriété de son élément parent.

Propriétés associées

overflow-wrap et word-break — contrôlent où les chaînes longues et insécables sont coupées.
text-overflow — à associer avec white-space: nowrap pour tronquer le texte avec des points de suspension.
word-wrap — l'alias hérité de overflow-wrap.
overflow — détermine ce qui se passe avec le contenu qui dépasse de son conteneur lorsqu'il ne revient pas à la ligne.

Pratique

Quelles sont certaines des caractéristiques de la valeur 'white-space' en CSS ?

Elle s'applique aux boîtes inline.Elle permet de contrôler les caractères d'espacement dans votre texte.Elle n'affecte pas les espaces, les lignes ou les autres types d'espaces blancs.Elle accepte des valeurs comme 'normal', 'nowrap', 'pre', 'pre-wrap' et 'pre-line'.Elle affecte la couleur du texte en CSS.