CSS 内容规则忽略了 HTML 元素属性中的换行符 (0x0a)

Question

我在 CSS 内容规则中使用换行符时遇到问题。

我生成一个元素并为其分配一个属性"text"。此属性的值将显示在元素伪元素:before问题是它不会正确显示属性值中包含的换行符。它以输入的方式显示它们。即：我看到的不是新行，而是打印&#x0a。

<div id='foo' class='somediv'>
foo
</div>
.somediv:after {
content: attr(text);
white-space: pre-line;
}
document.getElementById('foo').setAttribute('text', 'world &#x0a hello');

小提琴演示：https://jsfiddle.net/yp2gtc03/13/

我需要做什么才能正确显示它？

Answer 1

不能在 JS 中使用 HTML 实体引用。你需要 JS 转义。用：

document.getElementById('foo').setAttribute('text', 'world x0a hello');

document.getElementById('foo').setAttribute('text', 'world x0a hello');

.somediv:after {
content: attr(text);
white-space: pre-line;
}

<div id='foo' class='somediv'>
foo
</div>

Answer 2

您需要将white-space: pre-line;应用于元素本身，而不是:after。

实际的文本布局是元素的一部分。