是否有可能有一个新的行数据属性? 我想这样做: CSS:
[data-foo]:after {
content: attr(data-foo);
background-color: black;
}
HTML
<div data-foo="First line \a Second Line">foo</div>
我发现,“\\ a”是在CSS中的新行,但仍然无法正常工作
-------------------------------------------------------------------------------------------------------------------------
1. 以下是如何能工作。你需要修改你的数据属性,如下所示:
<div data-foo='First line 
 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处理器 CodeGo.net,以便为将要显示属性的代码进行解释。 与此相反,在HTML实体是由浏览器直接解释(我猜的......),所以它似乎工作。 然而,对于换行工作,你需要设置white-space: pre
保存在伪注的空白:您也可以考虑pre-wrap
或pre-line
这取决于你的内容的性质。 参考 关于获得一个换行的HTML实体代码: 关于attr()
值的content
属性:
2. 你的属性值内一个普通的换行符:
<div data-foo="First line
Second Line">foo</div>
浏览器已经在这方面已经出现bug,HTML规范还没有对这个很清楚,他们换行符的内容(他们正在采取等同于空格),而不是在属性值。在HTML5中的CR,属性值的解析规则说清楚,换行符被简单地添加到属性值。现代浏览器一般由这样的游戏规则。 然而,当通过在CSS中的价值attr(...)
,换行通常会被视为等同于一个空间,所以你需要设置white-space
在伪的值,使得换行符荣幸,pre
,pre-wrap
或pre-line
。 P.S.在HTML中,标记\a
就只不过是两个数据字,没有的符号

将表示换行(特别是换行),但它也不过相当于烃源实际的换行符。