CSS变量无法存储多行文本，因仅支持字符串且不解析换行符；需用white-space: pre-wrap配合JS注入文本并设置预格式化样式实现换行效果。
CSS变量本身不能存储多行文本
CSS变量（--my-var）是纯字符串值，不支持换行符、制表符或任何真实格式控制。你写 --text: "line1
line2";，浏览器会把
当作普通字符字面量，不会解析为换行；更糟的是，大多数 CSS 解析器会直接报错或静默截断。
white-space: pre-wrap 是替代方案的核心
真正要保留换行和空格，靠的不是“存多行”，而是让 HTML 内容在渲染时按需换行。关键在 white-space 属性配合预格式化内容：
-
<pre>或<code>元素天然支持换行保留，但语义受限 - 普通
<div>加white-space: pre-wrap;就能识别文本中的 - 必须搭配
word-break: break-word;或overflow-wrap: break-word;，否则长单词会撑破容器
JS + CSS 变量协同才是可行路径
如果你真需要“动态注入带换行的文本”，得用 JS 设置变量，再让 CSS 读取并渲染——但变量里仍不能含真实换行：
- JS 中用
element.style.setProperty('--raw-text', 'line1\nline2');（注意双反斜杠） - CSS 中无法用
content: var(--raw-text);渲染换行，因为::before/::after不支持white-space控制换行 - 正确做法：JS 把文本塞进
textContent或innerText，再用类名触发white-space: pre-wrap;
容易被忽略的兼容性细节
IE 和旧版 Android WebView 对 white-space: pre-wrap; 支持不完整，降级方案必须存在：
立即学习“前端免费学习笔记（深入）”；
- 兜底用
white-space: pre;+overflow-x: auto;，强制横向滚动 - 不要依赖
content: var(--x)显示多行——它永远只出一行，且换行符显示为方块或空白 - 若用
<textarea>模拟只读多行展示，记得设resize: none;和border: none;避免样式污染
