CSS数据属性新行字符&伪元素含量值 [英] CSS data attribute new line character & pseudo-element content value

问题描述

有可能在数据属性中有一个新行吗？

我想这样做：

CSS：

  [data-foo]：after {
 content：attr（data-foo）; 
 background-color：black; 
} 
  

HTML

 < div data-foo =第一行\a第二行> foo< / div> 
  

我发现\a在CSS中是一个新行，

解决方案

这里是如何工作。您需要修改数据属性，如下所示：

 < div data-foo ='First Line& #xa;第二行'> foo< / div> 
  

和CSS（概念证明）：

  [data-foo]：after {
 content：attr（data-foo）; 
 background-color：black; 
 color：white; 
 white-space：pre; 
 display：inline-block; 
} 
  

Fiddle演示： http://jsfiddle.net/audetwebdesign/cp4RF/

工作原理

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

根据CSS2.1规范， attr（attribute-label）返回一个字符串，但该字符串不是由CSS处理器解析（我不知道这是什么意思）。我推测， \a 必须由CSS处理器解释，以便代码显示属性。

相反，HTML实体由浏览器直接解释（我猜...），所以它似乎工作。

但是，对于换行工作，您需要设置 white-space：pre 伪元素中的空间。注意：根据您内容的性质，您也可以考虑预包装或前行。 / p>

参考

关于获取换行符的HTML实体代码：

http://www.fileformat.info/info/unicode/char/000a/ index.htm

关于内容的 attr（） 属性：

http：//www.w3。 org / TR / CSS2 / generate.html＃content

Is it possible to have a new line in a data attribute ?

I am trying to do something like this:

CSS:

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

HTML

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

I found that "\a" is a new line in CSS, but still does not work for me.

解决方案

Here is how this can work. You need to modify your data attribute as follows:

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

and the CSS (proof of concept):

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

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

How It Works

Using \a does not work, but the equivalent HTML entity does, 
.

According to the CSS2.1 spec, attr(attribute-label) returns a string but the string is not parsed by the CSS processor (I am not sure what this means exactly). I speculate that \a must be interpreted by the CSS processor in order for the code to be displayed property.

In contrast, the HTML entity is interpreted by the browser directly (I guess...) so it appears to work.

However, for the line feed to work, you need to set white-space: pre to preserve the white space in the pseudo-element. Note: you may also consider namely pre-wrap, or pre-line depending on the nature of your content.

Reference

Regarding getting the HTML entity code for a linefeed:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Regarding the attr() value for the content property:
http://www.w3.org/TR/CSS2/generate.html#content

这篇关于CSS数据属性新行字符&伪元素含量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！