pre标签换行设置技巧

HTML 中的 `

` 标签虽能忠实保留空格与换行，却默认不自动折行，导致长文本水平溢出、出现滚动条或截断；真正可靠的解决方案是通过 CSS 显式设置 `white-space: pre-wrap`（辅以 `word-wrap: break-word` 保障旧版 Safari 兼容），它在保留原始格式的同时智能按容器宽度折行，但需注意浏览器细微差异、字体影响及 IE 兼容性问题——掌握这些细节，才能让预格式化文本既美观又健壮。

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

</code> 默认保留空格和换行，但**不会自动折行**——超长行会水平溢出容器，滚动条或截断是常见现象。这不是 bug，而是 CSS 规范定义的 <code>white-space: pre</code> 行为：只认换行符 <code>\n</code>，忽略容器宽度限制。</p><h3>pre-wrap 能解决长行折行吗？</h3><p>能，但必须显式设置：<code>white-space: pre-wrap</code> 同时保留原有换行/空格，并在必要时按容器宽度折行。注意它不是 <code><pre></code> 的默认值，也不受 HTML 属性控制，纯靠 CSS。</p><p>常见误操作：</p><ul><li>只写 <code><pre class="wrap"></code> 却没在 CSS 里定义 <code>.wrap { white-space: pre-wrap; }</code></li><li>用 <code>word-break: break-all</code> 替代，结果把单词中间硬切，破坏可读性</li><li>嵌套 <code><pre></code> 里再放 <code><span></code> 且未重置 <code>white-space</code>，导致子元素行为不一致</li></ul><h3>pre-wrap 在不同浏览器里表现一致吗？</h3><p>现代浏览器（Chrome/Firefox/Safari/Edge）对 <code>white-space: pre-wrap</code> 支持良好，但有两个细节差异：</p><ul><li>Firefox 对连续空格的渲染略宽松，可能合并多个空格；Chrome 更严格遵循原始空格数</li><li>当内容含零宽空格 <code>\u200B</code> 或软连字符 <code>\u00AD</code> 时，折行位置可能跨浏览器不一致</li><li>IE11 及更早版本不支持 <code>pre-wrap</code>，需降级到 <code>pre-line</code> 或 JS 补丁</li></ul><p>实操建议：若需兼容 IE，用 <code>@supports (white-space: pre-wrap)</code> 做特性检测，避免全局 fallback。</p><h3>pre-wrap 配合 overflow 和 font-family 有坑吗？</h3><p>有。三个典型问题：</p><ul><li><code>overflow-x: auto</code> 和 <code>pre-wrap</code> 共存时，Firefox 可能出现双滚动条（横向+纵向），加 <code>overflow-y: hidden</code> 可缓解</li><li>等宽字体（如 <code>Consolas, "Courier New", monospace</code>）下折行位置更可预测；用非等宽字体时，中文混排可能因字宽计算偏差导致折行点偏移</li><li>移动端 Safari 对 <code>pre-wrap</code> 的行高处理偶发异常，建议显式设置 <code>line-height: 1.4</code> 而非依赖默认值</li></ul><p>最简生效代码：</p><pre class="brush:php;toolbar:false">code {
  white-space: pre-wrap;
  word-wrap: break-word; /* 旧版 Safari 兼容 */
  line-height: 1.4;
}

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

理论要掌握，实操不能落！以上关于《pre标签换行设置技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！