Les attributs de données CSS peuvent-ils restituer les caractères de nouvelle ligne avec des pseudo-éléments ?

Attributs de données CSS, caractères de nouvelle ligne et valeurs de contenu de pseudo-éléments

Pouvez-vous incorporer des caractères de nouvelle ligne dans les attributs de données CSS, leur permettant d'être affichés à l'aide de pseudo-éléments ? Explorons ce scénario.

Considérez le code CSS et HTML suivant :

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

Dans ce scénario, le caractère "a", censé être un caractère de nouvelle ligne en CSS, ne parvient pas à produire le résultat souhaité.

Solution :

Pour atteindre le résultat souhaité comportement, modifiez l'attribut data comme suit :

<div data-foo="First line &#xa; Second Line">foo</div>

Explication :

• Le La notation représente un caractère de nouvelle ligne en HTML.
• L'ajout d'une propriété d'espacement au pseudo-élément, obtenu grâce au "white-space: pre;" style, préserve les espaces dans l'attribut data.
• Le "display: inline-block;" Le style permet au pseudo-élément de s'enrouler sur plusieurs lignes.
• En conséquence, le contenu de l'attribut data, y compris le caractère de nouvelle ligne, est rendu comme prévu.

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!