La propriété d'espace blanc contrôle la manière dont le texte est traité sur l'élément auquel il est appliqué. Disons que vous avez du HTML exactement comme ceci:
A bunch of words you see. Vous avez stylisé le div pour avoir une largeur définie de 100 pixels. Avec une taille de police raisonnable, c'est trop de texte pour tenir dans 100 px. Sans rien faire, la white-spacevaleur par défaut est normal, et le texte sera enveloppé. Voir l'exemple ci-dessous ou suivre à la maison avec la démo.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Si vous souhaitez empêcher le texte de s'habiller, vous pouvez appliquer white-space: nowrap;
Remarquez dans l'exemple de code HTML en haut de cet article, il y a en fait deux sauts de ligne, un avant la ligne de texte et un après, qui permettent au texte d'être sur sa propre ligne (dans le code). Lorsque le texte est rendu dans le navigateur, ces sauts de ligne apparaissent comme s'ils étaient supprimés. Les espaces supplémentaires sur la ligne avant la première lettre sont également supprimés. Si nous voulons forcer le navigateur à afficher ces sauts de ligne et des espaces blancs supplémentaires, nous pouvons utiliserwhite-space: pre;
Il est appelé preparce que le comportement est que si vous aviez enveloppé le texte dans
Vous aimez peut-être la façon dont preles espaces blancs et les sauts sont honorés, mais vous avez besoin que le texte soit enveloppé au lieu de potentiellement sortir de son conteneur parent. Voilà à quoi ça white-space: pre-wrap;sert:
Enfin, white-space: pre-line;cassera les lignes là où elles entrent dans le code, mais l'espace blanc supplémentaire est toujours supprimé.
Fait intéressant, le dernier saut de ligne n'est pas honoré. Selon la spécification CSS 2.1: «Les lignes sont interrompues au niveau des caractères de nouvelle ligne conservés et, si nécessaire, pour remplir les cases de ligne. alors peut-être que cela a du sens.
Voici un tableau pour comprendre les comportements de toutes les différentes valeurs:
| Nouvelles lignes | Espaces et onglets | L'habillage de texte | |
|---|---|---|---|
| Ordinaire | S'effondrer | S'effondrer | Envelopper |
| pré | Préserver | Préserver | Pas de wrap |
| Nowrap | S'effondrer | S'effondrer | Pas de wrap |
| pré-emballer | Préserver | Préserver | Envelopper |
| pré-ligne | Préserver | S'effondrer | Envelopper |
Dans CSS3, la white-spacepropriété va littéralement suivre ce graphique et mapper les propriétés sur text-space-collapseet en text-wrapconséquence.
Plus d'information
- Documents Mozilla
Prise en charge du navigateur
Un peu plus complexe que la table de support standard, puisque chaque valeur a différents niveaux de support:
| Le navigateur | Version | Soutien de |
|---|---|---|
| Internet Explorer | 5.5 | normal | nowrap |
| 6,0 | normal | pre | nowrap |
|
| 8+ | normal | pre | nowrap | pre-wrap | pre-line |
|
| Firefox (Gecko) | 1,0 (1,0) | normal | pre | nowrap | -moz-pre-wrap |
| 3,0 (1,9) | normal | pre | nowrap | pre-wrap | -moz-pre-wrap |
|
| 3,5 (1,9,1) | normal | pre | nowrap | pre-wrap | pre-line |
|
| Opéra | 4.0 | normal | pre | nowrap |
| 8,0 | normal | pre | nowrap | pre-wrap |
|
| 9,5 | normal | pre | nowrap | pre-wrap | pre-line |
|
| Safari (WebKit) | 1,0 (85) | normal | pre | nowrap |
| 3,0 (522) | normal | pre | nowrap | pre-wrap | pre-line |