Propriété CSS white-space
La propriété white-space spécifie comment l'espace blanc à l'intérieur d'un élément est géré. Un espace blanc peut être une séquence d'espaces ou un saut de ligne.
Cette propriété peut être appliquée à tout contenu en ligne à l'intérieur d'un élément.
Les espaces supplémentaires spécifiés sont réduits à un seul, les sauts de ligne sont supprimés, et les lignes sont coupées et retournent à la ligne si nécessaire pour tenir dans leur conteneur.
| Valeur initiale | normal |
|---|---|
| S'applique à | Éléments de niveau en ligne et cellules de tableau, s'applique également à ::first-letter et ::first-line. |
| Héritée | 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
css
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;Exemple de la propriété white-space avec la valeur "normal" :
Exemple de la propriété CSS white-space avec la valeur normal
html
<!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>Résultat
Dans cet exemple, le texte retourne à la ligne si nécessaire.
Exemple de la propriété white-space avec la valeur "nowrap" :
Exemple de la propriété CSS white-space avec la valeur nowrap
html
<!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>Exemple de la propriété white-space avec la valeur "pre-line" :
Exemple de la propriété CSS white-space avec la valeur pre-line
html
<!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>Dans l'exemple suivant, vous pouvez voir la différence entre les valeurs "nowrap", "normal" et "pre-wrap".
Exemple de la propriété white-space avec trois valeurs :
Exemple de la propriété CSS white-space avec les valeurs nowrap, normal et pre-wrap
html
<!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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| 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é. | Tester » |
| nowrap | Avec cette valeur, le texte ne retournera jamais à la ligne suivante. | Tester » |
| pre | Préserve à la fois les espaces et les sauts de ligne. Le texte ne retournera pas à la ligne suivante. | Tester » |
| pre-line | Les séquences d'espaces blancs sont réduites à un seul espace. Le texte retourne à la ligne si nécessaire, et sur les sauts de ligne. | Tester » |
| pre-wrap | Les espaces blancs sont conservés par le navigateur. Le texte retourne à la ligne si nécessaire, et sur les sauts de ligne. | Tester » |
| break-space | Même comportement que « pre-wrap » sauf : - 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 caractère d'espace blanc préservé, y compris entre les caractères d'espace blanc - ces espaces préservés occupent de l'espace et ne dépassent pas, affectant ainsi les dimensions intrinsèques de la boîte | |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelles sont certaines des propriétés de la valeur 'white-space' en CSS ?