由Javascript插入的带有换行符的CSS伪元素内容值

Question

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

问题是，如果属性是通过Javascript设置的，这就不起作用了

我知道\A不能在attr中工作，但现在
不能通过Javascript在attr上工作，有什么方法可以让它工作吗？

​

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

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

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

​

Answer 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);
}

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

​

Answer 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>

​