数据属性中是否可以有一个新行？
我正在尝试做这样的事情：
CSS：
[data-foo]:after {
content: attr(data-foo);
background-color: black;
}
HTML
<div data-foo="First line \a Second Line">foo</div>
我发现 "\a" 是 CSS 中的一个新行，但仍然对我不起作用。
问问题
23656 次
5 回答
79
这是如何工作的。您需要按如下方式修改数据属性：
[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/
这个怎么运作
using\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()值：http: //www.w3.org/TR/CSS2/generate.html#contentcontent
于 2013-05-09T01:22:23.103 回答
9
您可以在属性值内使用普通换行符：
<div data-foo="First line
Second Line">foo</div>
浏览器在这方面存在缺陷，HTML 规范对此还不是很清楚；他们讨论了元素内容中换行符的含义（它们被视为等同于空格），但不在属性值中。在 HTML5 CR 中，属性值的解析规则清楚地表明，换行符只是简单地添加到属性值中。现代浏览器通常遵循这样的规则。
但是，当您在 CSS via 中使用该值时attr(...)，换行符通常会被视为等同于空格，因此您需要white-space在伪元素上设置一个使换行符生效的值，即pre,pre-wrap或pre-line。
PS 在 HTML 中，符号\a只是两个数据字符，没有特殊含义。该符号
表示换行符（特别是 LINE FEED），但它仅相当于源代码中的实际换行符。
于 2013-05-09T05:44:33.713 回答
1
在工具提示中添加新行
<tr>
<td>RFC</td>
<td>
<span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML
journey BU001: DPDs in Bureau, Low score and related issues
BU002: Presence of default qualifiers INC001: Low
reported Income INC002: Low Income as per SMS INC003:
Low Income as per Bank Statement EL001: Eligibility less than
defined M001: Name match failed in KYC M002: Name
match failed in Telco M003: Name Match failed in Address proof
M004: Face match failed M005: Distance match failed
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;
}
结果： 带有新行的工具提示
于 2021-06-04T05:42:00.657 回答
-1
...如果您想弄清楚这一点并且碰巧正在使用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.)
于 2016-12-31T03:19:27.770 回答
-5
好的，这是一种简单的方法。你应该把它写成
data-foo='First line </br> Second Line'
而不是使用 .text()，您可以使用 .html()。当您使用 .html() 时，它将作为换行符，这应该可以解决您的问题。
于 2017-02-23T11:10:01.917 回答