Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

white-space - Propriété CSS

white-space

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

Description rapide
Définit la gestion des espaces multiples et des retours chariot.
Statut
Standard
S'applique à
A tous les éléments contenant du texte.
Type de valeur
Valeur prédéfinie
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:: CRD (document proposé pour la recommandation)

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-spacetext-space-collapsetext-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.

Syntaxe de white-spaceSchéma syntaxique de la propriété CSS white-space (gestion des espaces multiples et des retours à la ligne). normal normal pre pre nowrap nowrap pre-wrap pre-wrap break-spaces break-spaces pre-line pre-linewhite-space:;white-space:;
  • 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, mais break-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.

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

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 :

Exemple de code HTML pour white-space

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.

white-space :
Ce texte a été saisi avec trois espaces⮐ entre chaque mots et un retour à la ligne.

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge de la propriété white-space avec les valeurs initialement prévues : pre-line, pre-wrap, etc.
Colonne 2
Prise en charge de white-space comme une propriété résumée, ce qui implique de nouvelles valeurs : collapse, preserve-space, etc.
1
white-space
2
New Values
Estimation de la prise en charge en pourcentage du parc actuel.
96%

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.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.