Comment ajouter des sauts de ligne au contenu des pseudo-éléments à l'aide de CSS ?

Ajout de sauts de ligne au contenu des pseudo-éléments à l'aide de CSS

Introduction

Lors de l'ajout de texte via ::after ou ::before pseudo-éléments en CSS sans accès au HTML ou PHP, il est nécessaire d'inclure des sauts de ligne pour le contenu multiligne. Cet article explique comment y parvenir en utilisant CSS.

Ajout de sauts de ligne

Pour ajouter des sauts de ligne dans la propriété de contenu, utilisez la séquence d'échappement "A". Cependant, le saut de ligne inséré est soumis à la propriété "white-space".

Exemple

Pour illustrer, considérons le code suivant :

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

Cela ajoutera un saut de ligne après "XXXXX" et affichera le contenu comme :

Office: XXXXX
Mobile: YYYYY

Alternative Séquence d'échappement

Si vous rencontrez des résultats imprévisibles lors de l'utilisation de A, il est conseillé d'utiliser 0000a à la place. Cela garantit que les chaînes arbitraires sont correctement échappées.

Exemple de fonction d'échappement

Pour plus de commodité, vous pouvez utiliser la fonction JavaScript suivante pour échapper du texte arbitraire et l'ajouter à un CSS bloc de style :

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!