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

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

<pre class="brush:php;toolbar:false;">&lt;/code&gt; 默认保留空格和换行，但**不会自动折行**——超长行会水平溢出容器，滚动条或截断是常见现象。这不是 bug，而是 CSS 规范定义的 &lt;code&gt;white-space: pre&lt;/code&gt; 行为：只认换行符 &lt;code&gt;\n&lt;/code&gt;，忽略容器宽度限制。&lt;/p&gt;&lt;H3&gt;pre-wrap 能解决长行折行吗？&lt;/H3&gt;&lt;p&gt;能，但必须显式设置：&lt;code&gt;white-space: pre-wrap&lt;/code&gt; 同时保留原有换行/空格，并在必要时按容器宽度折行。注意它不是 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 的默认值，也不受 HTML 属性控制，纯靠 CSS。&lt;/p&gt;&lt;p&gt;常见误操作：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;只写 &lt;code&gt;&lt;pre class=&quot;wrap&quot;&gt;&lt;/code&gt; 却没在 CSS 里定义 &lt;code&gt;.wrap { white-space: pre-wrap; }&lt;/code&gt;&lt;/li&gt;&lt;li&gt;用 &lt;code&gt;word-break: break-all&lt;/code&gt; 替代，结果把单词中间硬切，破坏可读性&lt;/li&gt;&lt;li&gt;嵌套 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 里再放 &lt;code&gt;&lt;span&gt;&lt;/code&gt; 且未重置 &lt;code&gt;white-space&lt;/code&gt;，导致子元素行为不一致&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;pre-wrap 在不同浏览器里表现一致吗？&lt;/H3&gt;&lt;p&gt;现代浏览器（Chrome/Firefox/Safari/Edge）对 &lt;code&gt;white-space: pre-wrap&lt;/code&gt; 支持良好，但有两个细节差异：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;DeepBI DHTML 页面生成器&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;DeepBI DHTML 页面生成器&lt;/a&gt; &lt;p&gt;生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;ul&gt;&lt;li&gt;Firefox 对连续空格的渲染略宽松，可能合并多个空格；Chrome 更严格遵循原始空格数&lt;/li&gt;&lt;li&gt;当内容含零宽空格 &lt;code&gt;\u200B&lt;/code&gt; 或软连字符 &lt;code&gt;\u00AD&lt;/code&gt; 时，折行位置可能跨浏览器不一致&lt;/li&gt;&lt;li&gt;IE11 及更早版本不支持 &lt;code&gt;pre-wrap&lt;/code&gt;，需降级到 &lt;code&gt;pre-line&lt;/code&gt; 或 JS 补丁&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;实操建议：若需兼容 IE，用 &lt;code&gt;@supports (white-space: pre-wrap)&lt;/code&gt; 做特性检测，避免全局 fallback。&lt;/p&gt;&lt;H3&gt;pre-wrap 配合 overflow 和 font-family 有坑吗？&lt;/H3&gt;&lt;p&gt;有。三个典型问题：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;code&gt;overflow-x: auto&lt;/code&gt; 和 &lt;code&gt;pre-wrap&lt;/code&gt; 共存时，Firefox 可能出现双滚动条（横向+纵向），加 &lt;code&gt;overflow-y: hidden&lt;/code&gt; 可缓解&lt;/li&gt;&lt;li&gt;等宽字体（如 &lt;code&gt;Consolas, &quot;Courier New&quot;, monospace&lt;/code&gt;）下折行位置更可预测；用非等宽字体时，中文混排可能因字宽计算偏差导致折行点偏移&lt;/li&gt;&lt;li&gt;移动端 Safari 对 &lt;code&gt;pre-wrap&lt;/code&gt; 的行高处理偶发异常，建议显式设置 &lt;code&gt;line-height: 1.4&lt;/code&gt; 而非依赖默认值&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;最简生效代码：&lt;/p&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;code { white-space: pre-wrap; word-wrap: break-word; /* 旧版 Safari 兼容 */ line-height: 1.4; }</pre><p>别漏掉 <code>word-wrap: break-word —— 它在 Safari 9–13 是 pre-wrap 折行的实际触发条件之一。