Propriété CSS white-space

La propriété white-space déclare comment les blancs sont gérés au sein de l'élément.

Un blanc peut être une séquence des espaces ou un saut de ligne.

La propriété white-space peut s'appliquer à n'importe quel contenu en ligne au sein d'un élément.

Des espaces supplémentaires spécifiés sont réduits en une seule, les nouvelles lignes sont supprimées et les lignes sont rompues et enveloppées si nécessaire pour les insérer dans leur conteneur.

Valeur initiale	baseline
Appliquée à	Éléments du niveau en ligne(inline) et éléments des cellules des tableaux. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Non.
Animable	Oui. L'alignement vertical est animable.
Version	CSS1
Syntaxe DOM	object.style.whiteSpace = "nowrap";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété white-space</h2>
    <div> Lorem Ipsum est simplement du faux texte.Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte.Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte.</div>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, le texte ne passe pas à la ligne suivante:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété white-space</h2>
    <div> Lorem Ipsum est simplement du faux texte.Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte.Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte. Lorem Ipsum est simplement du faux texte.</div>
  </body>
</html>

Essayez-vous-même!

La différence entre les valeurs "nowrap", "normal" et "pre-wrap" dans un exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.t1 {
      white-space: nowrap;
      }
      p.t2 {
      white-space: normal;
      }
      p.t3 {
      white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété white-space</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum est simplement du faux texte.
      Lorem Ipsum est simplement du faux texte.
      Lorem Ipsum est simplement du faux texte.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum est simplement du faux texte.
      Lorem Ipsum est simplement du faux texte.
      Lorem Ipsum est simplement du faux texte.
    </p>
    <h3>white-space: pre-line;</h3>
    <p class="t3">
      Lorem Ipsum est simplement du faux texte.
      LoremLorem Ipsum est simplement du faux texte.
      Lorem Ipsum est simplement du faux texte.
    </p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
normal	Casse des lignes si nécessaire à remplir les boîtes de lignes. C'est la valeur initiale de cette propriété.
nowrap	Avec cette valeur, le texte ne passera jamais à la ligne suivante.
pre	Permet d'avoir des espaces supplémentaires sur la ligne avant le premier lettre du texte.
pre-line	Séquences des blancs réduits en une seule. Le texte est emballé si nécessaire et sur les saut de lignes.
pre-wrap	Blancs sont préservés par le navigateur. Le texte est emballé si nécessaire et sur les saut de lignes.
break-space	Le même comportement que "pre-wrap" sauf: n'importe quelle séquence des blancs préservés occupe toujours un espace, y compris à la fin de la ligne opportunité des sauts de ligne existe après chaque caractère blanc préservé, y compris entre les caractères blancs préservés de tels espaces préservés prennent de la place et ne se suspendent pas, affectant ainsi les tailles intrinsèques de la boîte
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.