web-dev-qa-db-fra.com

Attribut de données CSS nouveau caractère de ligne et valeur de contenu de pseudo-élément

Est-il possible d'avoir une nouvelle ligne dans un attribut de données?

J'essaie de faire quelque chose comme ça:

CSS:

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

HTML

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

J'ai trouvé que "\ a" est une nouvelle ligne en CSS, mais ne fonctionne toujours pas pour moi.

htmlcssnewlinepseudo-elementcss-content
41
Snaker.Wood

Voici comment cela peut fonctionner. Vous devez modifier votre attribut de données comme suit:

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

et le CSS (preuve de concept):

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

Démonstration de violon: http://jsfiddle.net/audetwebdesign/cp4RF/

Comment ça marche

L'utilisation de \a Ne fonctionne pas, mais l'entité HTML équivalente fonctionne, &#xa;.

Selon la spécification CSS2.1, attr(attribute-label) renvoie une chaîne mais la chaîne n'est pas analysée par le processeur CSS (je ne suis pas sûr de ce que cela signifie exactement). Je spécule que \a Doit être interprété par le processeur CSS pour que le code soit affiché.

En revanche, l'entité HTML est interprétée directement par le navigateur (je suppose ...) donc elle semble fonctionner.

Cependant, pour que le saut de ligne fonctionne, vous devez définir white-space: pre Pour conserver l'espace blanc dans le pseudo-élément. Remarque: vous pouvez également envisager notamment pre-wrap Ou pre-line Selon la nature de votre contenu.

Référence

Concernant l'obtention du code d'entité HTML pour un saut de ligne:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Concernant la valeur attr() pour la propriété content:
http://www.w3.org/TR/CSS2/generate.html#content

65
Marc Audet

Vous pouvez utiliser un saut de ligne simple à l'intérieur d'une valeur d'attribut:

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

Les navigateurs ont été bogués à cet égard, et les spécifications HTML ne sont pas très claires à ce sujet; ils discutent de la signification des sauts de ligne dans le contenu des éléments (où ils prennent l'équivalent des espaces), mais pas dans les valeurs d'attribut. Dans HTML5 CR, les règles d'analyse des valeurs d'attribut indiquent clairement que les sauts de ligne sont simplement ajoutés à la valeur d'attribut. Les navigateurs modernes respectent généralement ces règles.

Cependant, lorsque vous utilisez la valeur en CSS via attr(...), le saut de ligne sera normalement traité comme équivalent à un espace, vous devez donc définir white-space Sur le pseudo-élément sur une valeur ce qui rend les sauts de ligne respectés, à savoir pre, pre-wrap ou pre-line.

P.S. En HTML, la notation \a N'est que deux caractères de données, sans signification particulière. La notation &#xa; Dénoterait un saut de ligne (spécifiquement, LINE FEED), mais ce serait juste équivalent à un saut de ligne réel dans souce.

6
Jukka K. Korpela