pre-wrap 是响应式代码块的默认安全选择，它保留换行符和空格、允许容器内自动折行，避免移动端横向滚动；需搭配 monospace 字体、tab-size 和 overflow-wrap: break-word 以正确处理缩进、Tab 及长 URL。
white-space: pre-wrap 是响应式代码块的默认安全选择
直接用 pre-wrap，别先想 pre 或 nowrap。它保留所有换行符和空格（包括缩进），又允许在容器边界自动折行，避免横向滚动条撑破移动端视口。
常见错误现象：代码块在手机上左右滑动、内容被截断、缩进错位——基本都是用了 pre 却没处理宽度或字体。
-
pre禁止换行，长行必然溢出；pre-wrap允许在空格/标点处折行，但不会在单词中间硬切（除非配合overflow-wrap: break-word） - 必须搭配
font-family: monospace，否则空格宽度不一致，Python 缩进或 JSON 对齐全乱 - 若需支持 Tab 键缩进显示，加
tab-size: 4（IE 不支持，但现代项目可忽略）
长 URL 或无空格字符串导致折行失效？补 overflow-wrap: break-word
pre-wrap 默认只在空白符或标点处换行，遇到 https://very-long-url-with-no-hyphens.com/... 这类内容，它会原样撑开容器——这不是 bug，是设计行为。
此时不能换用 word-break: break-all（它会在任意字母间断行，破坏可读性），而应叠加 overflow-wrap: break-word：
立即学习“前端免费学习笔记（深入）”；
code {
white-space: pre-wrap;
overflow-wrap: break-word;
font-family: monospace;
}
-
overflow-wrap: break-word仅在必要时才在长单词内部断行，优先保全文本语义 - 不要和
word-break: break-all混用，后者会把console.log断成conso le.lo g - 该组合在 Safari 15.4+、Chrome 90+、Firefox 88+ 均稳定支持
contenteditable 代码编辑区不能直接设 white-space: pre-wrap
富文本编辑器里嵌的代码编辑区域（如 div[contenteditable]），设 pre-wrap 会导致用户按空格键不产生可见空格（浏览器仍过滤连续空白），但回车却插入真实 \n——输入体验割裂。
真正可行的做法是保持 white-space: normal，再用 JS 拦截输入并手动插入 或 <span style="white-space:pre"> </span>：
- 监听
input事件，检测连续空格或 Tab 输入，替换为不可折叠空格 - 对粘贴的代码做预处理：
text.replace(/\t/g, ' ').replace(/ {2,}/g, match => ' '.repeat(match.length)) - 纯展示用的代码块（非编辑态）才放心用
pre-wrap；编辑态优先用<textarea>或<pre><code>配合 Prism/Highlight.js
与 flex 或 grid 布局嵌套时，white-space 可能被意外重置
当代码块放在 display: flex 的容器中，且父元素设了 align-items: center 或 justify-content: space-between，某些老版本 Chrome 会忽略子元素的 white-space 行为，导致换行失效或高度塌陷。
这不是 CSS 规范问题，而是渲染引擎对内联格式化上下文（IFC）的处理差异：
- 给代码块加
align-self: flex-start显式声明对齐方式 - 避免让代码块成为 flex 容器的直接子项；中间包一层
div并设min-width: 0 - 在 Grid 布局中，若代码块位于
grid-template-areas内，需确认其所在轨道未被minmax(0, 1fr)压缩掉换行空间
最易被忽略的一点：white-space 的效果依赖于字体度量。哪怕写了 pre-wrap 和 monospace，如果加载的等宽字体失败（比如网络中断、font-display: swap 导致闪动），空格宽度会退化为常规字体值，缩进立刻错乱。上线前务必检查字体加载状态和 fallback 链。
