html - 伪元素内容中属​​性文本的换行符

Question

与 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 的情况下从这样解释的属性中获取换行符？

我曾经试过的 fiddle :https://jsfiddle.net/dWkdp/3039/

Answer 1

当使用 HTML 时，您需要考虑将 换行，而不是将 \A 用于 CSS。您还需要添加 white-space:pre

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

<span data-usertext="Some random text with &#10; some newlines"></span>

你也可以这样做:

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

<span data-usertext="Some random text with &NewLine; some newlines"></span>

查看此链接了解更多详情:https://dev.w3.org/html5/html-author/charref