Comment afficher le contenu des attributs de données multilignes avec de nouvelles lignes à l'aide de CSS ?

Manipulation des attributs de données et du contenu des pseudo-éléments avec de nouvelles lignes

En CSS, il est possible de récupérer les valeurs des attributs de données à l'aide de la fonction attr() et de les afficher comme contenu utilisant des pseudo-éléments. Cependant, l'incorporation de nouvelles lignes dans ces attributs de données peut s'avérer difficile.

Problème : caractère de nouvelle ligne dans l'attribut de données

Considérez l'exemple de code suivant :

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

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

Malgré l'utilisation de la séquence d'échappement "a", qui représente un caractère de nouvelle ligne en CSS, le contenu de l'attribut data-foo reste sur un seul line.

Solution : syntaxe améliorée des attributs de données et configuration des espaces blancs

Pour activer les attributs de données multilignes, modifiez la syntaxe comme suit :

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

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

Dans cette version modifiée :

• white-space: pre; : préserve les caractères d'espacement dans l'attribut data, y compris les nouveaux lines.
• display: inline-block; : empêche le retour à la ligne du texte et permet au contenu de s'écouler sur plusieurs lignes.
•  : entité HTML pour un saut de ligne.

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!