html - 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

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

[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>

fiddle 演示:http://jsfiddle.net/audetwebdesign/cp4RF/

工作原理

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

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

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

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

引用

关于获取换行的 HTML 实体代码:
http://www.fileformat.info/info/unicode/char/000a/index.htm

关于 content 属性的 attr() 值:
http://www.w3.org/TR/CSS2/generate.html#content