white-space: pre-line 不换行是因为内容中缺少真实换行符\n；它仅对原始文本中的\n生效，不处理html空格或css word-break，需确保后端返回或js字符串中确实包含\n字符并用textcontent安全渲染。
为什么 white-space: pre-line 有时不换行
直接写 white-space: pre-line 却没效果，大概率是因为内容里根本没有换行符（\n）——HTML 渲染时把连续空格、制表符、换行都压缩成一个空格了，pre-line 只对原始文本里的 \n 生效，不是对
<br>或 CSS 的
word-break 起作用。
常见场景：后端返回的字符串带 \n，但你用 innerHTML 插入时没做转义或预处理；或者前端拼接字符串时用了普通换行（编辑器里回车），但 JS 字符串字面量里没写 \n。
- 后端传来的 JSON 字段值如
"第一行\n第二行"→ 前端直接赋给textContent或用innerText渲染，pre-line才会识别 - 若用
innerHTML插入纯文本，\n在 HTML 中不具换行语义，得手动替换成<br>或改用textContent - Vue/React 中绑定字符串变量时，确保该变量真实包含
\n字符（可用console.log(JSON.stringify(str))验证）
pre-line 和 pre-wrap 的关键区别在哪
两者都保留 \n 换行，但对空格和自动折行的处理不同：前者把多个空格合并为一个，且允许长单词在边界处断行；后者保留所有空白符（包括空格缩进），也允许折行。
- 适合「用户评论」「日志输出」等需保持段落结构但不care缩进的场景 → 用
pre-line - 适合「代码片段」「配置文件预览」等必须还原原始空格和缩进的场景 → 用
pre-wrap - 性能上无差异，但
pre-wrap在含大量空格的文本中可能触发更复杂的布局计算
服务端返回带 \n 的字符串，前端怎么安全渲染
核心原则：别让 \n 经过 innerHTML，否则它被当普通空白丢弃；也别盲目
replace(/\n/g, '<br>')，有 XSS 风险。
- 最简方案：用
element.textContent = str，再加white-space: pre-line样式 —— 安全、语义清晰、无需转义 - 若必须用
innerHTML（比如要支持简单 HTML 标签），先做 HTML 实体转义，再替换\n：str.replace(/&/g, '&').replace(/, '/g, '>').replace(/\n/g, '<br>')
- 注意：某些框架（如 Vue）的
v-text指令等价于textContent，天然适配pre-line
移动端 iOS Safari 对 pre-line 的兼容细节
iOS 15.4 之前版本存在一个 bug：当元素设置了 pre-line 且同时有 flex 布局或 overflow: hidden 时，\n 可能被忽略。不是所有机型都复现，但上线前建议真机验证。
- 临时绕过：加
word-break: break-word或overflow-wrap: break-word辅助触发换行 - 更稳妥做法：对 iOS 用户 UA 检测，降级为
pre-wrap或用br替换 - 不要依赖
white-space: pre，它会禁用所有自动折行，超长文本直接撑破容器
实体，而不是真正的 \n 字符。遇到换行失效，先 console.log 出字符串的 charCodeAt() 看第10位是不是 10。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
