通過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>