CSS数据属性新行字符和伪元素内容值

Question

是否可以在数据属性中添加新行？

我想做这样的事情:

CSS:

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

HTML

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

我发现"\ a"是CSS中的一个新行,但仍然不适用于我.

Answer 1

这是如何工作的.您需要修改数据属性,如下所示:

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

和CSS(概念证明):

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

这个怎么运作

使用\a不起作用,但等效的HTML实体确实如此
.

根据CSS2.1规范,attr(attribute-label)返回一个字符串,但CSS处理器不解析该字符串(我不确定这意味着什么).我推测\a必须由CSS处理器解释才能显示代码属性.

相比之下,HTML实体直接由浏览器解释(我猜...)所以它似乎工作.

但是,要使换行工作,您需要设置white-space: pre为保留伪元素中的空格.注意:您也可以考虑pre-wrap,或pre-line根据您的内容的性质.

参考

知道为什么使用jQuery $（“ [data-foo]”）。attr（“ data-foo”，“第一行＆＃xa;第二行”）无法正常工作吗？它仅显示“第一行＆＃xa;第二行”。 (2认同)

Answer 2

您可以在属性值中使用普通换行符:

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

浏览器在这方面一直都是错误的,HTML规范在这方面还不是很清楚; 他们讨论了元素内容中换行符的含义(它们与空格等价),但不在属性值中.在HTML5 CR中,属性值的解析规则清楚地表明,换行符只是添加到属性值中.现代浏览器通常遵循这样的规则.

但是,当您通过在CSS中使用的值attr(...),断行通常会被视为等同于一个空间,所以你需要设置white-space伪元素上,使得换行符荣幸,也就是一个值pre,pre-wrap或pre-line.

PS在HTML中,符号\a只是两个数据字符,没有特殊含义.符号
表示换行符(特别是LINE FEED),但它只相当于源中的实际换行符.