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

Question

这里有类似的讨论： CSS数据属性新行字符和伪元素内容值

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

我明白\\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 。 \ 是JS的等价物并且会使它工作。

 const ele = document.getElementById('my-ele'); //removed the # ele.classList.add('loading'); ele.setAttribute('loading-text', 'Your file is being generated...\
This 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>