标签内的长文本自动换行
" /> 标签内的长文本自动换行
" /></p><blockquote>
默认情况下， 标签会保留空格和换行且禁止自动折行，导致长文本溢出容器；通过 CSS 的 white-space: pre-wrap 可在保持原有格式的前提下实现智能换行。
</blockquote>
</p><p>默认情况下，`<pre class="brush:php;toolbar:false;">` 标签会保留空格和换行且禁止自动折行，导致长文本溢出容器；通过 css 的 `white-space: pre-wrap` 可在保持原有格式的前提下实现智能换行。</p><p>在 HTML 中，<pre class="brush:php;toolbar:false;"> 标签的设计初衷是<strong>精确呈现预格式化文本</strong>——即保留所有空格、制表符和原始换行，并默认禁用自动换行（white-space: pre）。这虽利于代码展示或日志输出，但在响应式布局或窄容器中极易引发水平滚动或内容溢出。</p><p>解决方法无需修改 HTML 结构（如手动插入 <br>），只需借助现代 CSS 的 white-space 属性：</p><ul><li>white-space: pre-wrap 是最佳选择：它<strong>保留所有空白符的语义</strong>（空格、缩进、换行符仍生效），同时<strong>允许浏览器在必要时自动折行</strong>（类似普通段落行为），完美兼顾可读性与格式准确性。</li></ul><p>示例代码如下：</p><pre class="brush:php;toolbar:false;"><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（完全放弃
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
