pre标签默认white-space:pre，但safari会忽略部分连续空格并对长英文单词自动截断，firefox严格保留空格却对超长无空格字符串不换行，chrome最接近规范但受flex/grid布局影响；显式用white-space:pre-wrap更可控且跨浏览器一致。
pre 标签默认自带 white-space: pre，但实际渲染中，不同浏览器对换行、空格、断行的处理并不一致——尤其在响应式容器或含长单词的场景下，pre 内容可能意外溢出或强制折行，这不是 bug，而是 white-space 与浏览器默认行为叠加的结果。
为什么 pre 在 Safari 和 Firefox 里换行表现不一样？
pre 的原始语义是“保留所有空白和换行”，但现代浏览器对其做了不同程度的“友好化”处理：
- Safari（尤其是 macOS 旧版）会忽略部分连续空格，并在容器窄时对长英文单词做
word-break: break-all式截断，即使没显式设置该属性 - Firefox 对
pre中的连续空格更严格，但遇到超长无空格字符串（如 base64 或 token）时，默认不换行，容易横向溢出 - Chrome 表现最接近规范，但若父容器用了
flex或grid，且未设min-width: 0，pre可能撑破布局
直接改 white-space 值比依赖 pre 标签更可控
与其靠 pre 标签的隐式行为，不如显式控制：pre 标签本身不解决换行逻辑，真正起作用的是它附带的 white-space: pre。你可以覆盖它：
- 要保留缩进+允许换行 → 改用
white-space: pre-wrap，它比pre更实用，且跨浏览器一致性高 - 要禁止换行但保留空格 → 用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 要完全等宽字体+不折行+滚动查看 →
white-space: pre+overflow-x: auto+overflow-y: hidden
示例：
.code-snippet {
white-space: pre-wrap;
overflow-wrap: break-word; /* 防止长 token 溢出 */
font-family: monospace;
}
pre 在表格单元格（td）里失效怎么办？
td 元素对 white-space 的继承有特殊限制，即使写了 white-space: pre-wrap，某些版本 Safari 和 IE 仍会忽略。必须加两层保障：
- 显式给
td设置white-space: pre-wrap - 同时设置
table-layout: fixed和width（哪怕width: 100%），否则 Safari 会无视换行规则 - 如果内容含中文或日文，再加
word-break: keep-all，避免 Safari 把假名或汉字中间断开
注意：不要依赖 pre 标签嵌套在 td 里来“修复”换行——它会被 td 的默认 white-space: normal 覆盖。
移动端小屏幕下 pre 换行最容易被忽略的点
不是所有设备都支持 pre-wrap 的“智能折行”，尤其 Android WebView（基于旧 Chromium）和 iOS 15 以下 Safari：
- 必须配合
overflow-wrap: break-word（而非仅靠word-break: break-all），前者优先尝试语义换行，后者直接暴力截断 - 避免在
pre内写纯数字长串（如 UUID、JWT payload），它们在部分 WebView 中不触发换行，需手动插入零宽空格或用 JS 拆分 -
font-size小于12px时，某些 Android 浏览器会关闭换行逻辑，建议最低设为13px
换行控制从来不是单点设置的事——white-space 是开关，overflow-wrap 和 word-break 才决定“怎么断”，而容器尺寸、字体、渲染引擎共同决定“断不断”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
