CSS数据属性新行字符＆伪元素含量值(CSS data attribute new line cha

是否有可能有一个数据属性的新行？

我试图做这样的事情：

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:

下面是如何能工作。您需要按如下步骤来修改数据属性：

<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;
}

小提琴演示： 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

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

您可以使用属性值中一个普通的换行符：

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

浏览器已经越野车在这方面，和HTML规范还没有对这个很清楚; 他们讨论元素含量换行符（他们正在采取等同于空格）的意思，而不是在属性值。在HTML5 CR，该属性值的解析规则说清楚，换行符被简单地添加到该属性值。现代浏览器通常由这样的游戏规则。

但是，当您通过在CSS中使用的值attr(...)断行通常会被视为等同于一个空间，所以你需要设置white-space的伪元素上，使得换行符的值兑现，即pre ， pre-wrap ，或pre-line 。

PS在HTML中，符号\a是只有两个数据字符，没有特殊含义。符号
 将表示换行（即，行），但它也不过相当于烃源的实际换行符。

...如果你想弄清楚这一点，并恰好在使用HAML和AngularJS然后使用\n 。

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "}

结果是：

Cost Per Unit: $10.54
(Calculated for applicable Feature Qty.)

好了，下面是一个简单的方法来做到这一点。你应该把它写成

data-foo='First line </br> Second Line'

而不是使用的.text（），你可以使用的.html（）。 当您使用的.html（），那么它会采取断线之后，这应该解决您的问题。

文章来源: CSS data attribute new line character & pseudo-element content value