CSS数据属性换行符&伪元素内容值

Posted 2023-03-05

【中文标题】CSS数据属性换行符&伪元素内容值

【英文标题】：CSS data attribute new line character & pseudo-element content value

【发布时间】：2013-05-03 07:48:48

【问题描述】：

数据属性可以换行吗？

我正在尝试做这样的事情：

CSS：

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

html

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

我发现“\a”是 CSS 中的一个新行，但仍然不适合我。

【问题讨论】：

\a 如果您将其直接放在content: "First line \a Second Line"; 中，则可以使用，但如果您通过attr() 将其拉入，则似乎不行。哇，有趣的问题！

我创建了一个演示来测试两种解决方案：普通换行符和
 实体。 codepen.io/denilsonsa/pen/bgxKgP 摘要：这两种解决方案都适用于所有现代浏览器（Chrome、Firefox、Safari 9+、IE 11+）。

【参考方案1】：

这是如何工作的。您需要按如下方式修改数据属性：

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

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

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

【讨论】：

知道为什么使用 jQuery $("[data-foo]").attr("data-foo", "First line Second Line") 不起作用？它只显示“第一行 第二行”。

与@SYNCRo 遇到的问题相同，如果它是从 js 变量分配给属性，则它不起作用。

【参考方案2】：

您可以在属性值内使用纯换行符：

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

浏览器在这方面存在缺陷，HTML 规范对此还不是很清楚；他们讨论了元素 content 中换行符的含义（它们被视为等同于空格），但不在属性值中。在 HTML5 CR 中，parsing rules for attribute values 清楚地表明，换行符只是简单地添加到属性值中。现代浏览器通常遵循这样的规则。

但是，当您通过attr(...) 使用CSS 中的值时，换行符通常会被视为等同于空格，因此您需要将伪元素上的white-space 设置为使换行符的值荣幸，即pre、pre-wrap或pre-line。

附：在 HTML 中，\a 符号只是两个数据字符，没有特殊含义。符号 
 表示换行符（特别是 LINE FEED），但它仅相当于源中的实际换行符。

【参考方案3】：

在工具提示中添加新行

<tr>
<td>RFC</td>
<td>
<span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML 
journey &#13;&#10;BU001: DPDs in Bureau, Low score and related issues         
&#13;&#10;BU002: Presence of default qualifiers &#13;&#10;INC001: Low 
reported Income &#13;&#10;INC002: Low Income as per SMS &#13;&#10;INC003: 
Low Income as per Bank Statement &#13;&#10;EL001: Eligibility less than 
defined &#13;&#10;M001: Name match failed in KYC &#13;&#10;M002: Name 
match failed in Telco &#13;&#10;M003: Name Match failed in Address proof 
&#13;&#10;M004: Face match failed &#13;&#10;M005: Distance match failed 
&#13;&#10;M006: No Local address found">
<span th:if="$user.rfc != null" th:text="$user.rfc"></span>
</span>
</td>
</tr>

在 CSS 中

span[data-descr] 
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;


span[data-descr]:hover::after,
span[data-descr]:focus::after 
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;


.rcftip:after 
content: '\A';
white-space: pre;
word-wrap: break-word;

结果： tooltips with new line

【参考方案4】：

...如果您想弄清楚这一点并且碰巧使用了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.)

【参考方案5】：

好的，这是一种简单的方法。你应该把它写成

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

和你可以使用.html()来代替.text()。 当您使用 .html() 时，它将作为换行符，这应该可以解决您的问题。