html - CSS数据属性换行符&伪元素内容值

是否可以在数据属性中换行？

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

CSS:

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

HTML

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

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

最佳答案

这是它的工作原理。您需要按如下方式修改您的数据属性:

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

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

工作原理

使用 \a 不起作用，但等效的 HTML 实体起作用。

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

相比之下，HTML 实体直接由浏览器解释(我猜......)所以它看起来有效。

但是，要使换行起作用，您需要设置 white-space: pre 以保留伪元素中的空白。注意:您还可以考虑 pre-wrap 或 pre-line，具体取决于内容的性质。

引用

关于html - CSS数据属性换行符&伪元素内容值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16451553/