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

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 */
}

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!