Maison >interface Web >tutoriel CSS >Comment ajouter des sauts de ligne à :: après ou :: avant le contenu des pseudo-éléments en CSS ?

Comment ajouter des sauts de ligne à :: après ou :: avant le contenu des pseudo-éléments en CSS ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-15 05:43:02520parcourir

How to Add Line Breaks to ::after or ::before Pseudo-Element Content in CSS?

Ajout de sauts de ligne à ::après ou ::avant le contenu des pseudo-éléments

Question :

Comment ajouter plusieurs lignes à la propriété content d'un pseudo-élément ::after ou ::before lorsque l'accès au balisage est limité au CSS ?

Réponse :

La propriété 'content' permet d'insérer des sauts de ligne à l'aide de la séquence d'échappement "A". Cependant, pour éviter le retour à la ligne, définissez la propriété 'white-space' sur 'pre' ou 'pre-wrap'.

Exemple :

#headerAgentInfoDetailsPhone:after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre;
}

Pour un échappement plus robuste, utilisez " 0000a" au lieu de "A" pour gérer les entrées arbitraires, comme le montre ce code :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

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!

Déclaration:
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