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

小编典典

html

数据属性中是否可以有新行？

我正在尝试做这样的事情：

CSS：

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

的HTML

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

我发现“ \ a”是CSS中的新行，但仍然对我不起作用。

阅读 420

2020-05-10

共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根据内容的性质。

2020-05-10