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

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

我曾经尝试过的小提琴：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>

<mat-card class="custom"></mat-card>

查看此链接以获取更多详细信息：https://dev.w3.org/html5/html-author/charref