white-space: pre-wrap能同时保留换行符和自动折行，因为它既保留所有空白符（空格、制表符、换行符），又允许浏览器在空格、制表符或换行符处自动折行，避免横向溢出。
为什么white-space: pre-wrap能同时保留换行符和自动折行
pre-wrap是唯一一个既继承pre的格式保留能力、又具备normal的自动断行逻辑的值。它不会把\n转成空格，也不会合并连续空格或制表符；同时，浏览器会在空格、制表符或换行符位置主动折行，而不是硬撑出水平滚动条。
pre-wrap在<pre class="brush:php;toolbar:false;"></pre>标签里怎么用才不踩坑
直接给<pre class="brush:php;toolbar:false;"></pre>加white-space: pre-wrap就行，但要注意三点：
- 不要叠加
white-space: pre——会覆盖掉pre-wrap，导致又不能换行 - 如果文本里有超长无空格字符串（比如 Base64、URL、十六进制哈希），单靠
pre-wrap可能不断行，得补一句word-break: break-word（比break-all更安全，只在必要处切） - 别用
pre-line替代——它会把多个空格压缩成一个，缩进和对齐全丢
哪些场景必须用pre-wrap，哪些场景不该用
该用的场景：
- 后端返回带
\n的纯文本摘要（如日志片段、用户评论） - Markdown 渲染后需保留缩进的代码块或列表项
- API 响应体直接插入页面，又不想用
<code>或<textarea></textarea>包装
不该用的场景：
- 终端模拟器输出（需要严格等宽对齐+横向滚动）
- ASCII 艺术图（任何换行都会破坏构图）
- 从 Word 粘贴来的富文本（含大量不可见控制字符，应先清洗）
pre-wrap的兼容性和性能影响
IE9+、Chrome 1+、Firefox 1+、Safari 3+、Edge 12+ 全支持，无需前缀。性能上没有额外开销，但要注意：它不会帮你过滤冗余空白——如果原始数据里有几十个空格开头，它就真显示几十个空格。这类问题得在接口层或 JS 处理，CSS 解不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
