css变量无法存储多行文本，因仅支持字符串且不解析换行符；需用white-space: pre-wrap配合js注入文本并设置预格式化样式实现换行效果。

CSS变量本身不能存储多行文本

CSS变量（--my-var）是纯字符串值，不支持换行符、制表符或任何真实格式控制。你写 --text: "line1 line2";，浏览器会把 当作普通字符字面量，不会解析为换行；更糟的是，大多数 CSS 解析器会直接报错或静默截断。

white-space: pre-wrap 是替代方案的核心

真正要保留换行和空格，靠的不是“存多行”，而是让 HTML 内容在渲染时按需换行。关键在 white-space 属性配合预格式化内容：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• <pre class="brush:php;toolbar:false;"></pre> 或 <code> 元素天然支持换行保留，但语义受限
• 普通 <div> 加 <code>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></textarea> 模拟只读多行展示，记得设 resize: none; 和 border: none; 避免样式污染