HTML中pre标签white-space:pre-wrap HTML中pre文本换行

是，pre标签默认不自动换行，超长文本会水平溢出；需用CSS设置white-space: pre-wrap才能按容器宽度折行，同时保留原有空格和换行。

pre 标签默认不换行长文本？

<pre> 默认保留空格和换行，但**不会自动折行**——超长行会水平溢出容器，滚动条或截断是常见现象。这不是 bug，而是 CSS 规范定义的 white-space: pre 行为：只认换行符 n，忽略容器宽度限制。

pre-wrap 能解决长行折行吗？

能，但必须显式设置：white-space: pre-wrap 同时保留原有换行/空格，并在必要时按容器宽度折行。注意它不是 <pre> 的默认值，也不受 HTML 属性控制，纯靠 CSS。

常见误操作：

• 只写 <pre class="wrap"> 却没在 CSS 里定义 .wrap { white-space: pre-wrap; }
• 用 word-break: break-all 替代，结果把单词中间硬切，破坏可读性
• 嵌套 <pre> 里再放 <span> 且未重置 white-space，导致子元素行为不一致

pre-wrap 在不同浏览器里表现一致吗？

现代浏览器（Chrome/Firefox/Safari/Edge）对 white-space: pre-wrap 支持良好，但有两个细节差异：

立即学习“前端免费学习笔记（深入）”；

• Firefox 对连续空格的渲染略宽松，可能合并多个空格；Chrome 更严格遵循原始空格数
• 当内容含零宽空格 u200B 或软连字符 u00AD 时，折行位置可能跨浏览器不一致
• IE11 及更早版本不支持 pre-wrap，需降级到 pre-line 或 JS 补丁

实操建议：若需兼容 IE，用 @supports (white-space: pre-wrap) 做特性检测，避免全局 fallback。

pre-wrap 配合 overflow 和 font-family 有坑吗？

有。三个典型问题：

• overflow-x: auto 和 pre-wrap 共存时，Firefox 可能出现双滚动条（横向+纵向），加 overflow-y: hidden 可缓解
• 等宽字体（如 Consolas, "Courier New", monospace）下折行位置更可预测；用非等宽字体时，中文混排可能因字宽计算偏差导致折行点偏移
• 移动端 Safari 对 pre-wrap 的行高处理偶发异常，建议显式设置 line-height: 1.4 而非依赖默认值

最简生效代码：

code {  white-space: pre-wrap;  word-wrap: break-word; /* 旧版 Safari 兼容 */  line-height: 1.4;}

别漏掉 word-wrap: break-word —— 它在 Safari 9–13 是 pre-wrap 折行的实际触发条件之一。