`White-space` - Propriété CSS

white-space

Résumé des caractéristiques de la propriété `white-space`

Description rapide

Définit comment sont restitués les espaces multiples et les retours chariot.

Statut

Standard

S'applique à

A tous les éléments contenant du texte.

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

normal

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété white-space passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Texte

Références (W3C)

🡇

🡅

CSS Text Module Level 4

Statut du document: WD (document de travail)

CSS Text Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schémas syntaxiques de `white-space`.

Schéma syntaxique de la propriété white-space.
(niveau 3)
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

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.

Code HTML

Résultat affiché par le navigateur

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`	`white-space-collapse`	`text-wrap-mode`
`normal`	`collapse`	`wrap`
`pre`	`preserve`	`nowrap`
`pre-wrap`	`preserve`	`wrap`
`pre-line`	`preserve-breaks`	`wrap`

Voici un résumé de l'effet des différentes valeurs pour white-space :

`white-space`	Saut de ligne dans le source	Espace et tabulation ⁽²⁾	Retour à la ligne automatique ⁽³⁾	Espace en fin de ligne	Autre séparateur en fin de ligne
`normal`	Fusionné ⁽¹⁾	Fusionné	Autorisé	Retiré	Suspension ⁽⁴⁾
`pre`	Préservé	Préservé	Interdit	Préservé	Préservé
`nowrap`	Fusionné ⁽¹⁾	Fusionné	Interdit	Retiré	Suspension ⁽⁴⁾
`pre-wrap`	Préservé	Preserve	Autorisé	Suspension ⁽⁴⁾	Suspension ⁽⁴⁾
`break-spaces`	Préservé	Préservé	Autorisé	Renvoi ⁽⁵⁾	Renvoi ⁽⁵⁾
`pre-line`	Préservé	Fusionné	Autorisé	Retiré	Suspension ⁽⁴⁾

(1) Les retours à la ligne sont remplacés par un espace.

(2) Il s'agit des espaces multiples ou caractères de tabulation qui peuvent être ramenés à un seul espace.

(3) Il s'agit des retours à la ligne automatiques qui surviennent lorsque le texte atteint la marge droite (dans les langues latines).

(4) Les caractères peuvent déborder dans la marge. Comme il s'agit le plus souvent d'espaces ou de caractères invisibles cela n'est pas gênant.

(5) Les espaces ou autres caractères de séparation peuvent être renvoyés au début de la ligne suivante.

Valeurs pour `white-space`.

Les exemples suivants sont tous basés sur un texte écrit comme ceci dans le code source :


	divCe   texte   est   écrit   avec      
	trois   espaces   dans   le   code   source.
	/div

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 remplacé par un espace. Les balises br sont respectées.

Ce texte est formaté avec trois espaces dans le code source.
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.

Ce texte est formaté avec trois espaces dans le code source.
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.

Ce texte est formaté avec trois espaces dans le code source.
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, ou en fonction de la largeur de l'élément.

Ce texte est formaté avec trois espaces dans le code source.
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.

Ce texte est formaté avec trois espaces dans le code source.
white-space: break-spaces;

Comme avec la valeur pre-wrap, les espaces successifs sont conservés, et les retours à la ligne automatiques se font, mais break-spaces autorise les retours à la ligne entre les espaces successifs : ce qui peut provoques des ligne vide (ajustez la largeur de l'élément).

Ce texte est formaté avec trois espaces dans le code source.
white-space: initial; (normal) white-space: inherit; white-space: revert; white-space: revertLayer; white-space: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `white-space`.

L'animation ci-dessous parcourt toutes les valeurs de white-space.

Ce texte comporte des espaces multiples et des retours à la ligne dans le code.

Exemple interactif avec la propriété `white-space`.

Le texte ci-dessous comporte trois espaces entre chaque mot et deux retours à la ligne, matérialisés par le symbole ⮐. Il a été saisi dans le code HTML comme ceci :

p Ce texte a été saisi ⮐ avec trois spaces entre les mots ⮐ et deux retour à la ligne. /p

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.

Ce texte a été saisi avec trois espaces entre les mots et deux retours à la ligne.

Compatibilité des navigateurs avec `white-space`.

Colonne 1

Support de la propriété white-space dans sa syntaxe première (jusqu'à la version 3 incluse).

Colonne 2

Prise en charge de la propriété display en tant que propriété résumée.

Remarques :

(1) Accepte uniquement les valeurs white-space-collapse et text-wrap-mode, pas white-space-trim.

Propriété
white-space

Nouvelles
valeurs

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `white-space`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

Concernant white-space. Définition première de la propriété white-space, acceptant les valeurs normal, pre et nowrap.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

Concernant white-space. Ajout de nouvelles valeurs pour la propriété white-space : pre-wrap, pre-line et inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Texte - Niveau 3

Ce module de spécification niveau 3 définit les contrôles typographiques de CSS, c'est à dire les règles de transformation d'un texte source en texte formaté, avec retours à la ligne. De nombreuses propriétés contrôlent l'alignement et la justification des textes, les règles de césure, l'espacements des caractères ou des mots, le regroupement des espaces successifs, etc.
Ces règles sont souvent dépendantes du langage, il est donc conseillé aux auteurs de spécifier la langue dans lequel le texte est écrit (attribut lang pour le HTML). Il peut même être nécessaire de préciser le système d'écriture utilisé en particulier pour les langues coréenne, japonaise, mongolienne, etc. A défaut la mise en forme typographique sera moins fine.

Concernant white-space. Ajout de la valeur break-spaces pour la valeur de la propriété white-space.

27 Janvier 1999
Document de travail.
22 Décembre 2020
Candidat à la recommandation.
Module CSS - Texte - Niveau 4

Ce niveau 4 de ce module de spécification décrit les propriétés qui agissent sur les règles typographiques : alignement et justification du texte, espacement des mots ou des caractères, règles de césure, etc.
Par rapport au niveau 3, plusieurs nouvelles propriétés ont été ajoutées, en particulier concernant les ruptures en fin de lignes, les césures, les espacements avant et/ou après le texte, etc.

Concernant white-space. A partir de cette version de la spécification CSS, white-space est une propriété résumée regroupant les valeurs des propriétés white-space-collapse, text-wrap-mode et white-space-trim.

22 Septembre 2015
Document de travail.

A propos de la gestion des textes, voir aussi.

La propriété white-space est décrite dans la spécification Module CSS - Texte, de même que tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce module de spécification :

Propriétés :

⚠

hanging-punctuation

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).

hyphenate-character

Définit le caractère qui sera à utiliser comme marque de césure.

⚠

hyphenate-limit-chars

Définit le nombre minimal de caractères pour autoriser la césure d'un mot.

⚠

hyphenate-limit-last

Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.

⚠

hyphenate-limit-lines

Définit le nombre maximal de lignes successives se terminant une césure

⚠

hyphenate-limit-zone

Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.

hyphens

Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.

letter-spacing

Espacement des lettres.

line-break

Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).

⚠

line-padding

Ajoute un espace au début et à la fin des lignes.

overflow-wrap

Gestion des coupures de mots pour les langues CJK et quelques autres.

tab-size

Définit la taille des caractères de tabulation.

text-align