Les attributs de données en CSS peuvent-ils contenir des caractères de nouvelle ligne ?

Gestion des caractères de nouvelle ligne dans les attributs de données CSS et le contenu des pseudo-éléments

Question :

Un attribut de données en CSS peut-il contenir un caractère de nouvelle ligne ? Plus précisément, la combinaison CSS et HTML suivante peut-elle atteindre cet objectif :

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

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

Réponse :

Il est en effet possible d'avoir une nouvelle ligne dans un attribut de données CSS. L’exemple fourni ne démontre cependant pas la syntaxe correcte. Pour obtenir le résultat souhaité, vous pouvez suivre ces étapes :

1. Modifiez votre attribut de données :

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

Dans ce code HTML mis à jour, le caractère de nouvelle ligne (a) est remplacé par l'entité HTML . Cette entité représente un caractère de saut de ligne (LF), qui créera une nouvelle ligne dans le contenu.

2. Ajustez votre CSS :

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

Dans le CSS, ajoutez les propriétés suivantes :

• white-space: pre; Préserve les espaces dans le contenu, y compris les nouvelles lignes.
• display: inline-block; Empêche le contenu de rompre le flux du texte environnant.

Ce CSS modifié garantit que le contenu de l'attribut data, y compris la nouvelle ligne, s'affiche 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!