标签内的长文本自动换行
"> 标签内的长文本自动换行
" /></p>
<blockquote>
默认情况下， 标签会保留空格和换行且禁止自动折行，导致长文本溢出容器；通过 CSS 的 white-space: pre-wrap 可在保持原有格式的前提下实现智能换行。
</blockquote>
<p>默认情况下，`</p>
<pre class="brush:php;toolbar:false;">` 标签会保留空格和换行且禁止自动折行，导致长文本溢出容器；通过 CSS 的 `white-space: pre-wrap` 可在保持原有格式的前提下实现智能换行。<p>在 HTML 中，</p><pre class="brush:php;toolbar:false;"> 标签的设计初衷是<strong>精确呈现预格式化文本</strong>——即保留所有空格、制表符和原始换行，并默认禁用自动换行（white-space: pre）。这虽利于代码展示或日志输出，但在响应式布局或窄容器中极易引发水平滚动或内容溢出。<p>解决方法无需修改 HTML 结构（如手动插入 <br>），只需借助现代 CSS 的 white-space 属性：</p>
- white-space: pre-wrap 是最佳选择：它保留所有空白符的语义（空格、缩进、换行符仍生效），同时允许浏览器在必要时自动折行（类似普通段落行为），完美兼顾可读性与格式准确性。
示例代码如下：
<style>
.pre-container {
width: 300px;
background-color: #f5f5f5;
padding: 12px;
border: 1px solid #ddd;
font-family: monospace;
white-space: pre-wrap; /* 关键声明 */
word-break: break-word; /* 可选：增强超长无空格字符串（如URL）的断行能力 */
}
</style><pre class="pre-container">
This is a single extremely long line with multiple spaces and no natural breaks — it would normally overflow the container without wrapping.
✅ 效果说明：
- 原始空格和缩进被完整保留；
- 文本在容器边界处自动换行，不破坏语义；
- 换行位置由浏览器根据内容与容器宽度智能计算，无需手动干预。
⚠️ 注意事项：
- 避免使用 white-space: pre-line（会合并多余空白，丢失缩进信息）或 white-space: normal（完全放弃
的格式保留特性）；
- 若需支持极长无空格字符串（如 Base64 数据、超长 URL），建议叠加 word-break: break-all 或更安全的 word-break: break-word；
- 所有现代浏览器（Chrome 1+, Firefox 1+, Safari 3+, Edge 12+）均原生支持 pre-wrap，兼容性无忧。
综上，white-space: pre-wrap 是优雅解决
溢出问题的标准方案——零侵入 HTML，纯 CSS 控制，语义与表现兼得。
