White-space-collapse - Propriété CSS
Résumé des caractéristiques de la propriété white-space-collapse
collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spacescollapsewhite-space-collapse passe d'une valeur à l'autre sans transition.Syntaxe de white-space-collapse (schéma).
Description de la propriété white-space-collapse.
La propriété white-space-collapse définit comment doivent être traités les espaces successifs, les caractères de tabulation, et les retours à la ligne figurant dans
le code source.
Les espaces successifs doivent-ils être fusionnés en un seul ? Et les retours à la ligne doivent-ils être conservés ou remplacés par un espace ?
Cette propriété sera utile pour préserver la disposition du texte dans le code source, dans certains cas particuliers comme l'écriture de code de programmation. Exemple : si le code source de la page est écrit de cette façon :
#id {
text-align:center;
font-size:2rem;
}
On aimerait que l'affichage de la page respecte cette disposition. Or par défaut, les navigateurs supprimeront les espaces successifs et les retours à la ligne. Ils afficheront donc :
#id { text-align:center; font-size:2rem; }
Reportez-vous également à la propriété white-space, plus ancienne mais toujours valide.
Valeurs pour white-space-collapse.
- white-space-collapse: collapse;
Cette valeur demande au navigateur de remplacer les tabulations et les retours à la ligne par une espace, puis de regrouper les espaces successifs en un seul espace, C'est la valeur par défaut de la propriété, et également le comportement habituel des navigateurs.
Exemple de texte. Deuxième ligne. - white-space-collapse: discard; ⚠
Tous les espaces rencontrés dans le code source sont retirés.
Attention ! Peu de navigateurs traitent correctement cette valeur. Si l'exemple ne fait pas apparaître de différence par rapport au précédent c'est que le navigateur que vous utilisez n'est pas compatible.
Exemple de texte. Deuxième ligne. - white-space-collapse: preserve;
Les espaces successifs, les tabulations, et les retours à la ligne sont préservés tels qu'ils figurent dans le code source. Le navigateur ne réduit pas les espaces successifs à un seul espace, les caractères de tabulation sont retranscrits en fonction de la propriété
tab-size, et les retours à la lignes rencontrés dans le code source sont transformés en sauts de ligne forcés (balise br).Exemple de texte. Deuxième ligne. - white-space-collapse: preserve-breaks;
Solution intermédiaire: les espaces successifs sont regroupés en un seul espace, les caractères de tabulation transformés en un espace, et les retours à la ligne du code source sont transformés en balise br (retour à la ligne forcés).
Exemple de texte. Deuxième ligne. - white-space-collapse: preserve-spaces; ⚠
Les espaces successifs sont conservés, les caractères de tabulation et les retours à la ligne sont convertis en un espace.
Exemple de texte. Deuxième ligne. - white-space-collapse: break-spaces;
Les espaces successifs sont préservés, y compris ceux en fin de ligne. Le navigateur peut insérer un retour à la ligne après chaque espace, y compris les espaces adjacents, c'est ce qui provoque la ligne blanche sur l'exemple.
Exemple de texte. Deuxième ligne. - white-space-collapse: initial; (
collapse) white-space-collapse: inherit; white-space-collapse: revert; white-space-collapse: revertLayer; white-space-collapse: unset;Liens vers la présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,unset.
Dans les exemples de code ci-dessous, le texte a été saisi avec trois espaces entre chaque mot, et vingt espaces à la fin de la première ligne.
Il comporte un retour à la ligne, et un caractère de tabulation (⭲). Le source a donc cette allure :
divExemple␣␣␣de␣␣␣texte.␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣␣
Deuxième⭲ligne./div
Simulateur avec la propriété white-space-collapse.
Le texte ci-dessous comporte trois espaces entre chaque mot et un retour à la ligne après 'new-yorkais'.
Support de white-space-collapse.
La propriété white-space-collapse est maintenant globalement bien reconnue par les navigateurs, sauf en ce qui concerne les valeurs preserve-spaces
et discard.
white-space-collapse qui définit comment le navigateur doit se comporter vis à vis des espace multiples et des tabulations.preserve-spaces pour la propriété white-space-collapse.white-space-collapsepreserve-spacesNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Safari
Safari sur IOS
Chrome
Edge
Firefox
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
Samsung Internet
KaiOS Browser
Opéra mini
Évolution de la propriété white-space-collapse.
-
Module CSS - Texte - Niveau 4
Introduction de la propriétéwhite-space-collapse.
22 Septembre 2015Document de travail.
Voir aussi, à propos de la gestion des textes.
La gestion des textes est ce qui est en rapport avec les ruptures, les césures, l'alignement des textes, etc. Ces spécifications sont regroupées dans le module CSS Text Module. Vous y trouverez les définitions suivantes :
Propriétés :
text-align).