Question

是否可以在数据属性中添加新行？

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

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处理器不解析该字符串（我不确定这意味着什么）。我推测CSS处理器必须解释\a才能显示代码属性。

相比之下，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

Answer 2

您可以在属性值中使用普通换行符：

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

浏览器在这方面一直存在问题，HTML规范在这方面还不是很清楚;他们讨论了元素内容中的换行符的含义（它们等同于空格），但不在属性值中。在HTML5 CR中，parsing rules for attribute values清楚地表明换行符只是添加到属性值中。现代浏览器通常遵循这样的规则。

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

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

Answer 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

Answer 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.)

CSS数据属性新行字符＆amp;伪元素内容值

4 个答案: