小编典典

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中的新行,但仍然对我不起作用。


阅读 421

收藏
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实体起作用&#xa;

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

相反,HTML实体是由浏览器直接解释的(我想…),因此它似乎可以工作。

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

2020-05-10