Règles de gestion des espaces HTML
« Espace blanc » en HTML comprend trois types : espace (espace), tabulation (tabulation) et saut de ligne (CR/LF).
Nous savons que par défaut, les caractères d'espacement dans le code source HTML sont affichés sous forme d'espaces et que plusieurs caractères d'espacement consécutifs seront traités comme un seul, ou en d'autres termes, plusieurs caractères d'espacement consécutifs seront fusionnés.
Cependant, parfois, nous espérons que plusieurs espaces consécutifs dans le code source HTML pourront être rendus de manière réaliste dans le navigateur Web, ou nous avons besoin que les sauts de ligne dans le code source fonctionnent comme de véritables sauts de ligne. Ainsi, nous avons découvert la balise
, qui peut véritablement restaurer la véritable situation des caractères d'espacement dans son texte interne.Nous mettons donc souvent un morceau de texte représentant du code informatique dans la balise
, et ils afficheront leurs propres effets d'indentation d'espace et de retour à la ligne dans le navigateur, sans que nous ayons besoin d'ajouter des styles et des balises supplémentaires pour le contrôler. et les sauts de ligne.Au fur et à mesure que notre compréhension du CSS continue de s'approfondir, nous constatons que tout cela est organisé par l'attribut white-space. La raison pour laquelle l'élément
est si magique est qu'il a le style par défaut {white-space: pre;}.attribut d'espace blanc
L'attribut white-space en CSS est utilisé pour définir les règles de traitement des caractères d'espacement du texte, notamment : s'il faut fusionner les caractères d'espacement, s'il faut conserver les sauts de ligne et s'il faut autoriser le retour à la ligne automatique. Les différents comportements de chaque valeur d'attribut sont présentés dans le tableau suivant :
liste de valeurs d'attribut d'espace blanc
| valeur d'attribut | espace | caractère de nouvelle ligne | Retour à la ligne automatique | est apparu pour la première fois dans |
|---|---|---|---|---|
normal | fusionner | négligence | permettre | CSS1 |
nowrap | fusionner | négligence | non autorisé | CSS1 |
pre | réserve | réserve | non autorisé | CSS1 |
pre-wrap | réserve | réserve | permettre | CSS2.1 |
pre-line | fusionner | réserve | permettre | CSS2.1 |
( Remarque : sous CSS1/2, l'attribut espace blanc ne peut être appliqué qu'aux éléments de niveau bloc ; sous CSS 2.1, il peut être appliqué à tous les éléments.)
Si nous avons besoin qu'un élément conteneur ait un comportement de traitement des espaces similaire à celui de l'élément
, définissez simplement le style {white-space: pre;} pour celui-ci. Besoin de pré-emballage
Expliquons d'abord le comportement du "retour à la ligne automatique" dans le tableau ci-dessus. Il fait référence au flux de texte à l'intérieur d'un élément tapé dans le sens du texte lorsque le flux de texte rencontre une limite qui limite son extension continue, qu'il s'agisse d'un retour à la ligne ou d'un retour à la ligne. pas. "Ne pas autoriser le retour à la ligne" signifie que le flux de texte débordera de l'élément.
Par conséquent, le style {white-space: pre;} ne répond parfois pas à nos attentes. Par exemple, dans certaines situations qui ne nécessitent pas de rigueur particulière, ou lors du formatage de certains extraits de code qui ne sont pas sensibles aux sauts de ligne (comme HTML ou CSS), nous ne voulons pas qu'une longue ligne de code dans l'extrait de code provoque son élément conteneur pour faire défiler horizontalement car il serait difficile à lire. Nous espérons que dans ce cas, le code long sera automatiquement renvoyé à la ligne.
À ce stade, en comparant les différentes caractéristiques comportementales de chaque valeur d'attribut dans le tableau ci-dessus, nous constaterons que la valeur d'attribut de pré-enveloppement se démarque - c'est exactement ce dont nous avons besoin.