标签内的长文本自动换行而不破坏空格格式 "> 标签内的长文本自动换行而不破坏空格格式 " /></p> <blockquote> 通过 CSS 的 white-space: pre-wrap 可以在保留原始空格与换行的同时，实现长文本在容器内自动折行，无需手动插入 或修改内容。 </blockquote> <p>通过 css 的 `white-space: pre-wrap` 可以在保留原始空格与换行的同时，实现长文本在容器内自动折行，无需手动插入 `<br>` 或修改内容。</p> <p>默认情况下，</p> <pre class="brush:php;toolbar:false;"> 标签会将内容按“预格式化”方式渲染：保留所有空白符（空格、制表符、换行），且<strong>禁止自动换行</strong>——这导致超长单行文本溢出容器，影响布局和可读性。<p>解决方法是覆盖其默认的 white-space: pre 行为，改用 white-space: pre-wrap。该值具备双重特性：</p>

• ✅ 保留原始空格、缩进和手动换行（与 pre 一致）；
• ✅ 允许浏览器在必要时（如到达容器边界）自动折行（类似 normal）；
• ✅ 不会合并多余空白（区别于 normal），语义更精准。

以下是一个完整示例：

<style>
.pre-container {
  width: 300px;
  background-color: #f5f5f5;
  padding: 12px;
  border: 1px solid #ddd;
  font-family: monospace;
}
.pre-container pre {
  white-space: pre-wrap; /* 关键声明 */
  margin: 0;
  overflow: visible; /* 避免隐藏溢出内容 */
}
</style><div class="pre-container">
  <pre class="brush:php;toolbar:false;">This is a single extremely long line with    multiple     spaces and no manual breaks — it will now wrap cleanly at word boundaries while preserving all intentional whitespace.

⚠️ 注意事项：

• 不要使用 white-space: break-spaces（虽支持换行但兼容性较差，截至 2024 年 Safari 支持有限）；
• 若需兼容旧版 IE（
• 切勿对

   直接设置 width + overflow-x: auto 仅作滚动处理——这牺牲可读性，而 pre-wrap 提供更自然的响应式排版。

综上，white-space: pre-wrap 是兼顾语义准确性与视觉可用性的最佳实践，推荐作为

 文本换行的标准解决方案。