CSS données d'attribut de caractère de nouvelle ligne & pseudo-élément de contenu de la valeur
Est-il possible d'avoir une nouvelle ligne dans un attribut de données ?
Je suis en train de faire quelque chose comme ceci:
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 dans le CSS, mais ne fonctionne toujours pas pour moi.
\a
fonctionne si vous placer directement dans lacontent: "First line \a Second Line";
mais apparemment pas si vous tirez dans la viaattr()
. Wow, c'est une question intéressante!- J'ai créé une démo pour tester les deux solutions: la plaine de saut de ligne, et


entité. codepen.io/denilsonsa/stylo/bgxKgP Résumé: les deux solutions fonctionnent sur tous les navigateurs (Chrome, Firefox, Safari 9+, c'est à dire 11+).
Vous devez vous connecter pour publier un commentaire.
Ici est de savoir comment cela peut fonctionner. Vous avez besoin de modifier vos données d'attribut comme suit:
et le CSS (preuve de concept):
Violon Démo: http://jsfiddle.net/audetwebdesign/cp4RF/
Comment Il Fonctionne
À l'aide de
\a
ne fonctionne pas, mais l'équivalent en entité HTML n',

.Selon le CSS2.1 spec,
attr(attribute-label)
retourne une chaîne de caractères, mais la chaîne n'est pas analysé par le CSS processeur (je ne suis pas sûr de ce que cela signifie exactement). Je pense que\a
doit être interprété par le processeur CSS pour que le code sera affiché à la propriété.En revanche, l'entité HTML est interprété par le navigateur directement (je suppose...) de sorte qu'il semble fonctionner.
Cependant, pour le saut de ligne de travail, vous devez définir
white-space: pre
pour conserver l'espace dans le pseudo-élément. Remarque: vous pouvez également envisager à savoirpre-wrap
, oupre-line
selon la nature de votre contenu.Référence
Concernant l'entité HTML code pour un saut de ligne:
http://www.fileformat.info/info/unicode/char/000a/index.htm
Concernant la
attr()
de la valeur pour l'content
propriété:http://www.w3.org/TR/CSS2/generate.html#content
Vous pouvez utiliser un simple saut de ligne à l'intérieur d'une valeur d'attribut:
Navigateurs ont été buggy à cet égard, et les spécifications HTML n'ont pas été très clairs sur ce point; ils discutent de la signification des sauts de ligne dans l'élément contenu (où ils sont à prendre comme équivalent à des espaces), mais pas dans les valeurs d'attribut. En HTML5, CR, le règles d'analyse pour les valeurs d'attribut, il est clair que les sauts de ligne sont simplement ajoutés à la valeur de l'attribut. Les navigateurs modernes jouez en général par de telles règles.
Toutefois, lorsque vous utilisez la valeur en CSS via
attr(...)
, le saut de ligne sera normalement considéré comme équivalent à un espace, vous devez définirwhite-space
sur le pseudo-élément à une valeur qui fait des sauts de ligne, à l'honneur, à savoirpre
,pre-wrap
, oupre-line
.P. S. HTML, la notation
\a
est à seulement deux caractères de données, sans signification particulière. La notation

désignerait un saut de ligne (plus précisément, de retour à la LIGNE), mais ce serait l'équivalent d'un réel saut de ligne dans le source de....et si vous êtes à essayer de comprendre tout cela et arriver à être l'aide d'
HAML
etAngularJS
ensuite utiliser\n
.résultats dans:
Ok, c'est un moyen facile de le faire. vous devriez l'écrire comme
et au lieu de l'aide .texte(), vous pouvez utiliser .html().
lorsque vous utilisez .html() ensuite, il faudra que le saut de ligne et cela devrait résoudre votre problème.