通过 Javascript 插入的 attr 换行的 CSS 伪元素内容值答案

【问题标题】：CSS pseudo-element content value with line-break via attr inserted by Javascript通过 Javascript 插入的 attr 换行的 CSS 伪元素内容值
【发布时间】：2019-07-14 06:11:52
【问题描述】：

这里有类似的讨论：CSS data attribute new line character & pseudo-element content value

问题是，如果 attr 是通过 Javascript 设置的，这不起作用

我知道\A 在 attr 中不起作用，但现在 &#xa; 在 attr 上无法通过 Javascript 起作用，有什么方法可以让它起作用吗？

const ele = document.getElementById('my-ele')
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...&#xa;This may take some minutes');

.loading::after {
  content: attr(loading-text);
}

&lt;div id="my-ele"&gt;&lt;/div&gt;

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用普通换行符（在 JavaScript 字符串中使用\n），修复getElementById() 调用（去掉“#”），并将white-space: pre-wrap; 添加到CSS。

const ele = document.getElementById('my-ele')
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes');

.loading::after {
  white-space: pre-wrap;
  content: attr(loading-text);
}

&lt;div id="my-ele"&gt;&lt;/div&gt;

【讨论】：

哇……一圈啊

【解决方案2】：

这是换行符&#10。 \u000A 是 JS 的等价物，可以让它工作。

const ele = document.getElementById('my-ele'); //removed the #
ele.classList.add('loading');
ele.setAttribute('loading-text', 'Your file is being generated...\u000AThis may take some minutes');

const ele2 = document.getElementById('my-ele2'); //removed the #
ele2.classList.add('loading');
ele2.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes'); //as suggested by Pointy also works!

.loading::after {
white-space: pre-wrap;
  content: attr(loading-text);
}

<div id="my-ele"></div>

<div id="my-ele2"></div>

【讨论】：