标签内长文本溢出容器
" /> 标签内长文本溢出容器
" /></p>
<blockquote>
通过 CSS 的 white-space: pre-wrap 可以在保留原始空格和换行的同时，自动折行显示长文本，无需手动插入 或修改 HTML 内容。
</blockquote>
<p>通过 css 的 `white-space: pre-wrap` 可以在保留原始空格和换行的同时，自动折行显示长文本，无需手动插入 `<br>` 或修改 html 内容。</p>
<p>默认情况下，</p>
<pre class="brush:php;toolbar:false;"> 元素使用 white-space: pre，这意味着它会严格保留所有空白符（包括空格、制表符和换行），且<strong>不自动换行</strong>——导致超长单行文本横向溢出容器，破坏布局。<p>解决方法是覆盖默认行为，改用 white-space: pre-wrap：该值既保留原始空格与换行结构，又允许浏览器在必要时（如到达容器边界）自动折行，语义清晰、兼容性好（支持 IE9+ 及所有现代浏览器）。</p><p>✅ 推荐做法（无需改动 HTML）：</p><pre class="brush:php;toolbar:false;">pre {
white-space: pre-wrap;
word-break: break-word; /* 可选：对极长无空格字符串（如超长 URL）增强折行能力 */
overflow-wrap: break-word; /* 更现代的等效写法，推荐与 word-break 配合 */
}
⚠️ 注意事项：
- 不要使用 white-space: normal，它虽可折行，但会丢弃所有原始空格和缩进，破坏
的语义；
- 避免手动插入
—— 这违背了内容与表现分离原则，且难以维护； - 若容器宽度动态变化（如响应式布局），pre-wrap 仍能自适应折行，而硬换行则失效；
- 对含超长连续非空白字符（如 Base64 字符串），建议额外添加 word-break: break-all 或 overflow-wrap: break-word 确保强制截断。
总结：只需一行 CSS 即可优雅解决
溢出问题，兼顾语义完整性与视觉可用性。
