pre标签默认不换行是因为其浏览器样式设为white-space: pre，保留所有空白符且禁止自动折行；需用white-space: pre-wrap实现保留格式与自动换行兼顾。
pre 标签默认不换行，是因为 white-space: pre
pre 标签的浏览器默认样式里就包含 white-space: pre，它的行为是：保留所有空格、制表符和换行符，但完全忽略容器宽度，禁止自动折行。所以哪怕你只写一行超长 URL 或一串无空格中文，也会横向撑开页面或触发滚动条。
这不是 bug，是规范定义的行为——pre 的语义就是“预格式化”，它本就不该被浏览器随意打断格式。想让它换行，必须显式覆盖这个默认值。
用 white-space: pre-wrap 是最稳妥的解法
white-space: pre-wrap 是唯一同时满足两个条件的值：保留原始换行/缩进/空格 + 在容器边界处自动折行。它不是 pre 的默认值，也不能靠 HTML 属性启用，纯靠 CSS 设置。
- ✅ 不会丢失用户输入中的
\n 或多个连续空格；✅ 长单词（如 URL、身份证号）会在容器右边界自然断开，不溢出；
✅ 现代浏览器全支持（Chrome 1+、Firefox 1+、Safari 3+、Edge 12+）；
❌ 不要用
white-space: break-spaces，Safari 直到 2026 年仍不支持；❌ 别混用
text-overflow: ellipsis，它和 pre-wrap 逻辑冲突，省略号不会生效。要不要加 word-wrap: break-word？看场景
如果内容里有真正不可分割的长串（比如 https://example.com/a/b/c/d/e/f/g/h/i/j/k/l/m/n/o/p 或一整段无空格中文），仅靠 pre-wrap 可能不够——它只在空格或标点处折行。这时需要补充 overflow-wrap: break-word（旧写法 word-wrap: break-word 也兼容）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 对无空格长串安全断词，只在必要时切开，不会把“用户”切成“用”+“户”；
❌ 避免用
word-break: break-all，它会在任意字符间硬切，中文可读性崩坏；✅ 如果父容器是 Flex 布局，记得给
pre 或其直接包裹元素加 min-width: 0，否则 Flex 的默认 min-width: auto 会锁死换行逻辑。别绕开 pre 标签语义去套 div + CSS
有人图省事，把原本该用 pre 的代码块、日志、ASCII 艺术改成 div + white-space: pre-wrap。这看似可行，但丢掉了语义：pre 明确告诉浏览器“这是预格式化内容”，对屏幕阅读器、SEO、打印样式都有影响。
真正要改的是样式，不是标签。直接给 pre 加 CSS 即可，不需要额外嵌套或替换标签结构。只要注意别在 pre 上同时设 overflow: hidden 或 overflow-x: auto ——前者藏掉内容，后者牺牲可读性，都不是换行的替代方案。
