Propriété CSS `white-space-collapse`

Baseline 2024

Nouvellement disponible

Depuis mars 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Voir la compatibilité complète
En savoir plus

La propriété CSS white-space-collapse contrôle la manière dont les espaces blancs à l'intérieur d'un élément sont regroupés.

Note : Les propriétés white-space-collapse et text-wrap-mode peuvent être déclarées ensemble en utilisant la propriété raccourcie white-space.

Syntaxe

css

/* Valeurs avec un mot-clé */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;

/* Valeurs globales */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;

La propriété white-space-collapse est définie par un seul mot-clé choisi parmi la liste des valeurs ci-dessous.

Valeurs

collapse

Les séquences d'espaces blancs sont regroupées.

preserve

Les séquences d'espaces blancs et les caractères de saut de segment sont préservés.

preserve-breaks

Les séquences d'espaces blancs sont regroupées, tandis que les caractères de saut de segment sont préservés.

preserve-spaces

Les séquences d'espaces blancs sont préservées, tandis que les tabulations et les caractères de saut de segment sont convertis en espaces.

break-spaces

Le comportement est identique à preserve, sauf que :

Toute séquence d'espaces blancs préservés occupe toujours de l'espace, y compris à la fin de la ligne.
Une opportunité de retour à la ligne existe après chaque caractère d'espace blanc préservé, y compris entre les caractères d'espace blanc.
Les espaces préservés occupent de l'espace et ne pendent pas, affectant ainsi les tailles intrinsèques de la boîte (taille min-content et taille max-content).

Note : Les caractères de saut de segment sont des caractères tels que les sauts de ligne qui provoquent le passage du texte à une nouvelle ligne.

Note : Le module de texte CSS définit une valeur discard pour la propriété white-space-collapse afin de supprimer tous les espaces blancs dans l'élément, cependant, cela n'est pris en charge par aucun navigateur.

Définition formelle

Valeur initiale	`collapse`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

white-space-collapse = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces

Exemples

HTML

html

<h2 class="collapse">Le comportement par défaut&nbsp;;
  tous  les          espaces       sont   regroupés
  dans  le           titre         .</h2>

<h2 class="preserve">Dans ce cas
  tous  les          espaces       sont   préservés
  dans  le           titre         .</h2>

<h2 class="preserve-breaks">Dans ce cas uniquement
  les   passages     à la          ligne   sont     préservés
  dans  le           titre         .</h2>

<h2 class="preserve-spaces">Dans ce cas uniquement
  les   espaces      sont          préservés
  dans  le           titre         .</h2>

CSS

css

.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

.preserve-spaces {
  white-space-collapse: preserve-spaces;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
  border-bottom: 1px dotted #cccccc;
}