white-space: pre-wrap 是解决「保留空格换行且不溢出容器」最直接有效的方案，它在保留原始空白符和换行符的同时允许自动折行，而 pre 虽保留格式但禁止换行，易致横向溢出。
white-space: pre-wrap 是解决「既要保留原始空格/换行，又不能溢出容器」最直接有效的方案。它不破坏语义结构，也不依赖 JavaScript 补救，但用错值或忽略配合属性，反而会让布局失控。
为什么 pre-wrap 比 pre 更实用
pre 会原样保留所有空白符（包括制表符、多空格、换行），但完全禁止自动换行——哪怕文本超长，也硬挤在一行，容易撑破容器、触发横向滚动条。pre-wrap 则保留原始空白符序列（比如用户输入里两个空格还是两个空格，换行符仍起作用），同时允许浏览器在必要时于空格或换行符处正常折行。
常见错误现象：pre 用于显示代码片段或日志时没问题，但用于用户评论、富文本摘要等场景，常导致移动端横向溢出或文字被截断。
- 适用场景：用户提交的带格式文本、后台返回的含换行的 API 响应、Markdown 渲染后需保留缩进的段落
- 不适用场景：需要严格等宽对齐的 ASCII 图、终端模拟器输出（此时应坚持用
pre+overflow-x: auto） - 注意：IE9+ 支持
pre-wrap，无需前缀；旧版 IE（
pre-wrap 和 white-space: normal 的关键区别
normal 会把连续空格、制表符、换行符全压缩成单个空格，再按容器宽度自动换行——这意味着你从后端拿到的 " Hello\n\nWorld "，浏览器渲染出来就是 "Hello World"，原始格式彻底丢失。pre-wrap 则让这段字符串原样呈现为两行，首尾空格可见，中间空行保留。
性能影响几乎为零，但要注意：如果文本含大量无意义空格（如从 Word 粘贴来的内容），pre-wrap 会照单全收，可能造成意外缩进或留白。此时应在数据层清洗，而非靠 CSS 修复。
- 换行触发点：
pre-wrap只在空格、制表符、换行符处断行；normal同样只在这些位置断行，但先抹掉多余空白 - 与
text-overflow: ellipsis不兼容：二者无法共存于单行截断场景，因为pre-wrap天然允许多行 - 若需单行且保留空格，必须改用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，但换行符会被压成空格
必须配合的三个属性
pre-wrap 单独使用常不够——它只管“怎么处理空白”，不管“超出怎么办”“要不要截断”。实际项目中，几乎总要搭配以下至少一项：
-
overflow-wrap: break-word（或旧名word-wrap: break-word）：防止无空格长串（如 URL、base64）卡住不换行。例如"https://example.com/a_very_long_path_without_spaces"在pre-wrap下仍会溢出，加了它才在字符间断行 -
max-width或width：否则pre-wrap对块级元素无效（默认 width: auto，无限宽） -
line-height：保留换行时，若原始文本含多空行，line-height决定视觉间距是否合理；默认值通常够用，但设计稿有明确行高要求时需显式设置
示例：
.comment {
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 400px;
line-height: 1.5;
}
容易被忽略的边界情况
真实数据往往比文档示例复杂：pre-wrap 对 Unicode 空格（如 、 、 ）和不可见控制字符（如 U+200B 零宽空格）行为不一致。某些 CMS 或编辑器插入的 在 pre-wrap 下仍被当普通空格处理，但 U+200B 可能被忽略或引发奇怪换行。
更隐蔽的问题是服务端转义：如果后端返回的换行符是 \r\n 而非 \n，部分老版本 Safari 会将其视为空格而非换行符，导致 pre-wrap 失效。稳妥做法是在 JS 层统一 normalize 换行符，或后端输出前替换为 \n。
最后提醒：不要在 <pre class="brush:php;toolbar:false;"></pre> 标签上盲目套 white-space: pre-wrap——<pre class="brush:php;toolbar:false;"></pre> 默认就是 pre，加了反而可能干扰原有样式继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
