_ihhu

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

是否有可能有一个新的行数据属性? 我想这样做: 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 &#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处理器 CodeGo.net,以便为将要显示属性的代码进行解释。 与此相反,在HTML实体是由浏览器直接解释(我猜的......),所以它似乎工作。 然而,对于换行工作,你需要设置white-space: pre保存在伪注的空白:您也可以考虑pre-wrappre-line这取决于你的内容的性质。 参考 关于获得一个换行的HTML实体代码: 关于attr()值的content属性: 
2. 你的属性值内一个普通的换行符:

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

浏览器已经在这方面已经出现bug,HTML规范还没有对这个很清楚,他们换行符的内容(他们正在采取等同于空格),而不是在属性值。在HTML5中的CR,属性值的解析规则说清楚,换行符被简单地添加到属性值。现代浏览器一般由这样的游戏规则。 然而,当通过在CSS中的价值attr(...),换行通常会被视为等同于一个空间,所以你需要设置white-space在伪的值,使得换行符荣幸,prepre-wrappre-line。 P.S.在HTML中,标记\a就只不过是两个数据字,没有的符号&#xa;将表示换行(特别是换行),但它也不过相当于烃源实际的换行符。

posted on 2016-01-14 13:00  _ihhu  阅读(245)  评论(0编辑  收藏  举报