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

Question

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

我生成一个元素并为其分配一个属性“文本”。该属性的值将显示在元素伪元素 :before 中 问题是它不会正确显示属性值中包含的换行符。它以输入的方式显示它们。即:我看到打印了 而不是新行。

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

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

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

fiddle 演示: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>