通过JavaScript插入的CSS伪元素内容值，使用attr换行

Question

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

问题是，如果通过JavaScript设置属性，这个方法不起作用。

我知道\A在属性中不能使用，但现在通过JavaScript在属性中也无法使用
，有什么办法可以使其正常工作吗？

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>

- Mojimi

Answer 1

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

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>

- Pointy

---

哇...完整的循环，是吗？ - Mojimi

Answer 2

这是换行符的字符表示：&#10。在JS中，\u000A 是等效于它的，使用它可以起到相同的作用。

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>

- Mouser