white-space: pre-wrap最常用且安全，它保留空格和换行符并允许自动换行；而pre禁止换行易致横向溢出，pre-line则合并连续空格。
直接用 white-space: pre-wrap，90% 的场景够用且安全。它既不引入 XSS 风险，也不需要 JS 预处理 HTML 实体，还能避免容器被长行撑破。
为什么不是 pre？
pre 确实保留所有空格和换行，但它禁止自动换行——只要有一行超长文本（比如用户粘贴的 Base64 或长 URL），容器就会横向溢出，触发滚动条或破坏布局。
- 常见错误：把后端返回的日志用
white-space: pre渲染，结果右侧出现难看的横向滚动条 - 兼容性注意：IE8+ 支持
pre，但 IE7 及怪异模式下会退化为normal - 语义缺失：仅靠 CSS 没法传达“这是预格式化内容”，不如直接用
标签语义清晰
pre-wrap 和 pre-line 怎么选？
关键区别在是否保留连续空格：
-
pre-wrap：保留所有空格、制表符、换行符，且允许在容器边界自动折行 → 适合代码块、JSON 响应、带缩进的配置片段 -
pre-line：合并连续空格（只留一个），但保留换行符，并允许自动折行 → 适合用户评论、富文本编辑器导出的纯文本，避免缩进错乱又保留段落结构 - 注意：
pre-line会吃掉开头/结尾的空格，而pre-wrap会保留（包括行尾空格）
配合 overflow-wrap 处理长单词
white-space 控制的是空格和换行符行为，对“一整串无空格字符”（如 https://example.com/very-long-path-with-no-hyphens）完全无效。这时必须叠加：
-
overflow-wrap: break-word：只在必要时断行，优先找空格/连字符，找不到才在长单词里断（推荐） -
word-break: break-all：粗暴地在任意字符间断，中文会断在字中间，慎用 - 示例：
code { white-space: pre-wrap; overflow-wrap: break-word; }
真正容易被忽略的是：即使用了 pre-wrap，如果父容器没有设定宽度或 max-width，自动换行也无从谈起；另外，pre-wrap 对 的 value 直接渲染无效——得把它塞进 或 才起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
