Comment insérer des sauts de ligne dans ::after ou ::before le contenu des pseudo-éléments ?

Sauts de ligne dans ::after ou ::before Contenu des pseudo-éléments

La personnalisation du contenu des pseudo-éléments ::after ou ::before en CSS peut améliorer la présentation des éléments. Cependant, l'insertion de plusieurs lignes dans la propriété content pose un défi.

Pour relever ce défi, CSS fournit un mécanisme permettant d'inclure des sauts de ligne à l'aide de la séquence d'échappement « A ». La règle ci-dessous montre comment :

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

En spécifiant la propriété "white-space" comme "pre" ou "pre-wrap", le saut de ligne est respecté et affiché en conséquence.

Cependant, la prudence est de mise lors de l'échappement de chaînes arbitraires. Au lieu de « A », il est recommandé d'utiliser « 0000a » pour éviter des résultats imprévisibles causés par des caractères suivant la nouvelle ligne.

Voici une fonction JavaScript que vous pouvez utiliser pour ajouter du texte à un style CSS avec la séquence d'échappement nécessaire. :

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

Avec cette technique, vous pouvez facilement incorporer plusieurs lignes dans la propriété de contenu des pseudo-éléments ::after ou ::before, améliorant ainsi la présentation visuelle de vos éléments.

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!