pre标签默认white-space: pre导致内容不换行而横向溢出；修复方案是显式设置white-space: pre-wrap并配合overflow-wrap: break-word，兼顾保留格式与响应式折行。
pre 标签默认会保留所有空格和换行，但不自动换行——内容超宽时直接横向溢出，这是最常被忽略的布局破绽。
为什么 pre 会横向撑破容器
pre 的默认 white-space 值是 pre，它保留所有空白符且禁止自动换行。哪怕容器宽度只有 200px，一段没空格的长日志（如 Base64 或 URL）也会强制拉伸整行，导致横向滚动或破坏响应式布局。
- 不是浏览器 bug，是规范行为：CSS 里
white-space: pre明确要求“不因容器边界而换行” -
pre标签本身没有内置换行逻辑，它只做“原样输出”，换行与否全靠 CSS 控制 - 在 Flex/Grid 容器中嵌套
pre，更容易触发min-width: auto导致父容器被撑开
用 white-space: pre-wrap 替代默认值
这是最直接有效的修复方式：既保留原始换行和缩进，又允许长单词在容器边界处折行。
- 必须显式覆盖：即使用了
pre标签，也要加 CSS 设置white-space: pre-wrap - 搭配
overflow-wrap: break-word（或旧名word-wrap: break-word）能更可靠处理无空格长串 - 注意 IE 兼容性：
pre-wrap在 IE8+ 标准模式下可用；IE7 及怪异模式会退化为normal
.safe-pre {
white-space: pre-wrap;
overflow-wrap: break-word;
/* 可选：防止意外滚动 */
overflow-x: auto;
}
当需要保留 pre 语义但禁用横向溢出时
别改标签，改样式。用 <div> + <code>white-space: pre + 换行控制，比硬套 pre 更可控。
-
pre标签有默认上下 margin 和等宽字体，若只是要格式化文本，div配合white-space: pre更轻量 - 想保留换行但禁止长串溢出？组合用
white-space: pre-wrap+overflow-wrap: anywhere（现代浏览器支持） - 服务端返回的纯文本含大量
\t？pre会照常显示制表符，但视觉上可能错位——建议用tab-size控制宽度
pre 与 code 混用时的常见误判
很多人以为 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 能自动解决换行，其实无效：内层 code 不改变 white-space 行为，外层 pre 仍按默认规则执行。
- 真正起作用的是外层元素的
white-space值，和是否嵌套code无关 -
code是语义标签，仅影响字体和可访问性，不干预空白处理 - 如果要高亮 + 换行双保障，应统一在
pre上设white-space: pre-wrap，再由语法高亮库（如 Prism）处理内部结构
真正麻烦的不是换行本身，而是不同场景下对“保留”和“折行”的需求混在一起——比如用户提交的日志既要显示原始缩进，又要适配手机屏宽。这时候硬记五个 white-space 值不如盯住两个关键点：是否必须保留所有空格、是否允许在任意位置断行。
