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
normal | pre | pre-wrap | pre-line | nowrap | break-spaces
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)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schémas syntaxiques de white-space.

white-space - Syntax diagramSyntax diagram of the white-space CSS property. See stylescss.free.fr for details. normal normal pre pre nowrap nowrap pre-wrap pre-wrap break-spaces break-spaces pre-line pre-linewhite-space:;white-space:;
Schéma syntaxique de l'ancienne syntaxe de la propriété white-space
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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 :

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 (2) Retour à la ligne automatique (3) Espace en fin de ligne Autre séparateur en fin de ligne
normal Fusionné (1) Fusionné Autorisé Retiré Suspension (4)
pre Préservé Préservé Interdit Préservé Préservé
nowrap Fusionné (1) Fusionné Interdit Retiré Suspension (4)
pre-wrap Préservé Preserve Autorisé Suspension (4) Suspension (4)
break-spaces Préservé Préservé Autorisé Renvoi (5) Renvoi (5)
pre-line Préservé Fusionné Autorisé Retiré Suspension (4)
(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.

white-space :
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.

1
Propriété
white-space
2
Nouvelles
valeurs
Estimation de la prise en charge globale.
96%
0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

1

Chrome

1

Edge

1

Opéra

1

Safari

Safari sur IOS

Androïd Brower

1

Chrome pour Androïd

1

Firefox pour Androïd

Samsung Internet

1

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
Caniuse

Histoire de la propriété white-space.

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
Spécifie comment doit être aligné le texte de l'élément.
⚠
text-align-all
Définit l'alignement des lignes d'un texte (synonyme de text-align).
text-align-last
Définit l'alignement de la dernière ligne des paragraphes.
⚠
text-autospace
Définit l'espace entre les caractères adjacents (utilisable pour les langues CJK).
text-indent
Définit le retrait de la première ligne des paragraphe (indentation).
⚠
text-justify
Sélectionne la méthode utilisée pour justifier le texte : espaces entre les mots ou entre les lettres.
✗
text-space-collapse
Définit comment gérer les espaces et les espaces multiples dans le texte.
✗
text-space-trim
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
⚠
text-spacing
Propriété résumée pour text-spacing-trim et text-autospace. regroupe les informations d'espacement des caractères pour les langues CJK.
⚠
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Définit la casse du texte (minuscules, majuscules, petites capitales...).
⚠
text-wrap
Définit la gestion des retours à la ligne du texte.
text-wrap-mode
Définit si les retours à la ligne sont autorisés.
text-wrap-style
Définit comment les saut de ligne vont se faire.
White-space
Définit comment sont restitués les espaces multiples et les retours chariot.
white-space-collapse
Définit comment les espaces successifs et les retours à la ligne doivent être traités.
⚠
white-space-trim
Définit si comment le navigateur doit supprimer les espaces réductibles.
⚠
word-boundary-detection
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
✗
word-boundary-expansion
Substitue certains caractères de séparation de mots par d'autres.
word-break
Coupure des mots longs.
⚠
word-space-transform
Normalise les caractères d'espacement (écritures CJK).
word-spacing
Permet d'ajuster l'espacement des mots.
word-wrap
Coupure des mots pour les langues CJK et quelques autres.
⚠
wrap-after
Autorise ou non les sauts de lignes après la boite.
⚠
wrap-before
Autorise ou non les sauts de lignes avant la boite.