Maison > interface Web > tutoriel CSS > Comment injecter du texte multiligne dans des pseudo-éléments CSS ?

Comment injecter du texte multiligne dans des pseudo-éléments CSS ?

Mary-Kate Olsen
Libérer: 2024-11-21 06:43:10
original
1080 Les gens l'ont consulté

How to Inject Multi-Line Text into CSS Pseudo-Elements?

Injecter du texte multiligne dans des pseudo-éléments

Lors de la modification du contenu d'une page Web uniquement via des modifications CSS, il peut être nécessaire d'incorporer plusieurs -line texte en ::after ou ::before pseudo-éléments. Bien que les sauts de ligne HTML traditionnels ne soient pas pris en charge dans ce contexte, l'utilisation de séquences d'échappement fournit une solution.

Solution

La propriété de contenu CSS permet l'inclusion de sauts de ligne par intégration de la séquence d'échappement "A" dans la chaîne de contenu. Cependant, les sauts de ligne résultants restent soumis à la propriété « espace blanc ». Par conséquent, pour préserver le format multiligne, il est crucial de définir 'white-space: pre;' ou 'white-space: pre-wrap;'.

Par exemple :

#headerAgentInfoDetailsPhone::after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}
Copier après la connexion

Recommandation

Pour une compatibilité croisée améliorée, il Il est conseillé d'utiliser la séquence " 0000a " au lieu de " A " lors de la gestion des sauts de ligne Unicode. Cette approche garantit des sauts de ligne précis malgré les incertitudes potentielles de manipulation des chaînes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal