伪元素内容中属性文本的换行符答案

【问题标题】：Newlines from attribute text in pseudo element's content伪元素内容中属性文本的换行符
【发布时间】：2019-01-01 16:40:06
【问题描述】：

使用content: attr(attribute-name)，可以添加带有来自元素属性的文本内容的伪元素（:before 或:after）。除此之外，伪元素的content 属性也允许通过伪元素内容中的\A 字符换行：

content: attr(attribute-name1) '\a' attr(attribute-name2)

我现在想要的是能够在包含多行文本的单个属性的值内控制换行符的位置和存在。文本由用户定义，因此不受我的控制。

元素：

<span data-usertext="Some random text with \a some newlines"/>

CSS：

span:after {
  content: attr(data-usertext);
  white-space: pre;
}

遗憾的是，这不起作用：\a 被打印出来，好像它是一个简单的字符序列。出于好奇，我还尝试了\r、\n 和<br />。

如何在不使用 Javascript 的情况下从属性中获取换行符？

我曾经尝试过的小提琴：https://jsfiddle.net/dWkdp/3039/

【问题讨论】：

【解决方案1】：

使用 HTML 时，您需要考虑使用 &#10; 换行，而不是与 CSS 一起使用的 \A。您还需要添加white-space:pre

span:after {
  content: attr(data-usertext);
  white-space:pre;
}

&lt;span data-usertext="Some random text with &amp;#10; some newlines"&gt;&lt;/span&gt;

您也可以这样做：

span:after {
  content: attr(data-usertext);
  white-space:pre;
}

&lt;span data-usertext="Some random text with &amp;NewLine; some newlines"&gt;&lt;/span&gt;

【讨论】：

谢谢！这样就解决了问题。我完全忘记了 HTML 实体。我添加了缺少的white-space: pre，因为我忘了从小提琴中插入它。
我的代码取得了进展，现在我还需要通过 JS (span.dataset.usertext = "Some new &10; user text") 设置属性。这样做时，不会解析文本中的实体，例如 &10;。相反，它们再次被解释为文本（参见jsfiddle.net/dWkdp/3042）。有什么想法吗？
@SebastianBarth 是的，JS 也和 HTML 不一样，让我记住诀窍，让你知道 ;)
我找到了一个解决方案，但不是很好：问题是我的文本没有被解析为 HTML。相反，它被解析为文本，也被设置为属性的文本。为了将其解析为 HTML，我刚刚创建了一个新元素，将其 HTML 设置为包含实体的文本，然后再次将其作为 HTML 获取：const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; - 当然这会引入一个安全问题，迫使我首先过滤文本。我希望你有一个更好的主意！见jsfiddle.net/dWkdp/3044
@SebastianBarth 是的，恐怕这实际上是你唯一的方法。