white-space - Propriété CSS
Résumé des caractéristiques de la propriété white-space
normal
| pre
| pre-wrap
| pre-line
| nowrap
| break-spaces
normal
white-space
passe d'une valeur à l'autre sans transition.Description la propriété white-space
.
La propriété white-space
définit comment représenter les espaces successifs et les retours à la ligne.
Classiquement, HTML ignore les espaces successifs et provoque les retours à la ligne automatiques du texte entre
les mots. Cette solution permet à l'auteur de présenter le code HTML (indentation) sans que cela perturbe le résultat
affiché par le navigateur.
Cependant ce fonctionnement peut être gênant dans certains cas : présentation de code informatique, alignement
vertical de colonnes, etc.
Par défaut les navigateurs appliquent les règles suivantes au code HTML :
- Les retours à la ligne dans le code HTML sont remplacés par un espace.
- Les tabulations sont remplacées par un espace.
- Les espaces successifs sont remplacés par un espace unique.
Comme on le voit sur les exemples ci-dessous, ce fonctionnement est parfait pour du texte classique mais inutilisable
par exemple pour afficher du code informatique.
La propriété white-space
résout ce problème.
div
Il est fréquent d'insérer des
espaces, des retours à la ligne
⇥ ou des tabulations pour rendre
⇥ le code plus lisible.
/div
➤
Il est fréquent d'insérer des espaces, des retours à la ligne ou des tabulations pour rendre le code plus lisible.
div
// Contrôle d'accès :
⇥ if( pwd != '' ) {
⇥ ⇥ exit();
⇥ }
/div
➤
// Contrôle d'accès : if( pwd != '' ) { exit(); }
Nouvelle définition de white-space
(module texte niveau 4).
Une nouvelle définition est à l'étude, mais pas encore stabilisée
(voir Module Css Texte - Niveau 4).
white-space
deviendra une propriété résumée pour regrouper les valeurs des trois propriétés suivantes :
white-space-collapse
: autorise ou non la suppression des espaces multiples.white-space-trim
: autorise ou non la suppression des espaces au début ou à la fin du texte.text-wrap-mode
: autorise ou non les retours à la ligne automatiques.
Les valeurs actuelles de white-space
ne changeront pas mais auront un équivalent dans les propriétés détaillées, conformément au tableau ci-dessous.
white-space | text-space-collapse | text-wrap |
---|---|---|
normal | collapse | wrap |
pre | preserve | nowrap |
nowrap | collapse | nowrap |
pre-wrap | preserve | wrap |
pre-line | preserve-breaks | wrap |
Syntaxes pour white-space
- Module texte niveau 3.
Les schéma ci-dessous ne reprend que les valeurs définies dans la spécification Text Module Level 3
. Les nouvelles valeurs, introduites dans
la spécification du niveau 4 seront prochainement ajoutées.
- -white-space: normal;
Valeur par défaut. Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne automatiques se font en fonction de la largeur de l'élément (lorsque la ligne de texte est plus grande que la largeur de l'élément). Les retours à la ligne qui figurent dans le code source du document sont ignorés.
- white-space: nowrap;
Les espaces successifs sont affichés comme des espaces uniques.
Les retours à la ligne automatiques ne se font pas, et les retours figurant dans le code HTML sont ignorés (le seul retour à la ligne possible est donc le retour forcé avec une balise br).Le texte peut donc déborder sur la droite de l'élément si les lignes sont plus longue que la largeur de ce dernier.
- white-space: pre;
Les espaces multiples et les retours à la ligne se font comme ils apparaissent dans le code HTML.
Aucun retour à la ligne automatique n'est ajouté. Le texte peut donc déborder sur la droite de l'élément. Il peut également ne pas commencer contre le bord gauche si une tabulation ou des espaces sont présents en début de ligne dans le code HTML.
- white-space: pre-line;
Les espaces successifs sont affichés comme des espaces uniques. Les retours à la ligne se font comme ils apparaissent dans le code HTML.
Le texte peut déborder sur la droite de l'élément.
- white-space: pre-wrap;
Les espaces successifs sont conservés. Les retours à la ligne automatiques se font en fonction de la largeur de l'élément.
- white-space: break-spaces;
Comme avec la valeur
pre-wrap
, les espaces successifs sont conservés, et les retours à la ligne automatiques se font, maisbreak-spaces
autorise les retours à la ligne entre les espaces successifs. - white-space:
initial
; white-space:inherit
; white-space:revert
; white-space:revert-layer
; white-space:unset
;La valeur initiale est :
.normal
Animation de la propriété white-space
.
L'animation ci-dessous parcourt toutes les valeurs de white-space
.
Simulateur.
Le texte ci-dessous comporte trois espaces entre chaque mot et un retour à la ligne. Il a été saisi dans le code HTML comme sur cette copie d'écran :
Certaines valeurs semblent ajouter un saut de ligne avant le texte. En fait ce saut existe dans le code HTML puisque la balise div est bien suivie d'un retour à la ligne.
Pour mettre en évidence la différence entre pre-wrap
et break-spaces
, ajustez doucement
la largeur de l'élément. break-spaces
autorise le retour à la ligne entre les espaces : vous verrez
les espaces au début de la ligne suivante, ce qui ne se produit jamais avec pre-wrap
qui ne coupe
que après les suites d'espaces.
Prise en charge par les navigateurs (compatibilité).
white-space
avec les valeurs initialement prévues : pre-line
, pre-wrap
, etc.
white-space
comme une propriété résumée, ce qui implique de nouvelles valeurs : collapse
,
preserve-space
, etc.
white-space
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que white-space
.
Les spécifications CSS éditées par le W3C sont organisées en modules. white-space
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.