CSS content规则下HTML元素属性中换行符(0x0a)无法正常显示求助

这个问题我之前也碰到过，核心原因是HTML属性里的换行符被编码成了HTML实体
，而CSS的attr()函数会直接把这个实体当成普通文本输出，不会解析成换行。下面给你两种可行的解决方案：

方案一：直接使用原生换行符 + CSS white-space属性 #

这是最简洁的方法，只要确保你的HTML属性值里是真正的换行字符（不是实体），然后通过CSS让换行生效：

HTML代码 #

<div class="target-element" text="第一行内容
第二行内容"></div>

CSS代码 #

.target-element:before {
  content: attr(text);
  /* 关键属性：保留换行，同时允许过长内容自动换行 */
  white-space: pre-wrap;
  /* 可选：如果需要严格保留所有空白（包括空格），可以用white-space: pre; */
  /* 如果只需要保留换行、折叠连续空白，用white-space: pre-line; */
}

这样设置后，伪元素里的内容就会正常显示换行了。

方案二：如果无法修改HTML属性，用JS转换实体为换行符 #

如果因为业务限制，你不能修改HTML里的属性值（属性里已经是
实体），可以用JavaScript把实体替换成原生换行符，再配合CSS的white-space：

JavaScript代码 #

// 选中所有需要处理的元素
const elements = document.querySelectorAll('.target-element');
elements.forEach(el => {
  // 把属性里的
替换成原生换行符\n
  const originalText = el.getAttribute('text');
  const processedText = originalText.replace(/
/g, '\n');
  // 重新设置属性值
  el.setAttribute('text', processedText);
});

配合同样的CSS #

.target-element:before {
  content: attr(text);
  white-space: pre-wrap;
}

为什么原来的方法不生效？ #

浏览器在解析HTML属性时，会把
这类实体当成字符串内容，而不是解析成对应的换行符。所以CSS的attr(text)读取到的是包含
的文本，自然不会显示成换行。只有当属性值里是原生的\n（换行字符），再通过white-space属性告诉浏览器要保留换行，才能正常显示。

内容的提问来源于stack exchange，提问作者cluelessCoder