Comment ajouter des sauts de ligne au contenu des pseudo-éléments en CSS ?

Incorporation de sauts de ligne dans le contenu des pseudo-éléments

Ajout de plusieurs lignes à la propriété de contenu des pseudo-éléments ::after ou ::before peut améliorer la lisibilité et le formatage. Cependant, exécuter cette opération uniquement via CSS présente un défi.

Utilisation de la séquence d'échappement "A"

La documentation des propriétés de contenu suggère d'utiliser la séquence d'échappement "A" pour inclure des nouvelles lignes dans le contenu généré. Ce saut de ligne inséré adhère à la propriété 'white-space'.

Pour illustrer son application, considérons l'exemple suivant :

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

Ce code ajoute un saut de ligne entre le "Office" et le texte « Mobile », formatant le contenu sur plusieurs lignes. Voir la démonstration en direct sur http://jsfiddle.net/XkNxs/.

Remarque d'avertissement

Lorsque vous échappez des chaînes arbitraires, utilisez " 0000a " au lieu de " A " pour éviter des résultats imprévisibles résultant de caractères ultérieurs ressemblant à des valeurs numériques ou hexadécimales. Un exemple de fonction pour y parvenir en toute sécurité :

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!