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>

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 4.0+


Trouvez-vous cela utile?

Articles Associées