javascript - 通过 Javascript 插入的 attr 换行的 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>