HTML中如何使用pre标签保留文本格式-html教程-PHP中文网

标签默认保留空格与换行，但受 white-space: normal 等 css 影响易失效；应显式设 white-space: pre-wrap，嵌套保障语义与可访问性，内容需转义，配合 overflow-x: auto 和 max-width: 100% 适配响应式。

html中如何使用pre标签保留文本格式

pre 标签默认保留空格和换行，但受 CSS 影响容易失效

<pre class="brush:php;toolbar:false;"></pre> 的核心作用是原样渲染文本中的空格、制表符和换行符，这是它和 <p></p> 或 <div> 最根本的区别。但它不是“绝对保险”——一旦父容器或自身被设置了 <code>white-space: normal（比如某些重置样式表或框架默认规则），格式就会丢失。

常见错误现象：<pre class="brush:php;toolbar:false;"></pre> 里写了多行缩进文本，页面上却挤成一行；或者中间多个空格只显示一个。

检查浏览器开发者工具中 <pre class="brush:php;toolbar:false;"></pre> 元素的 computed white-space 值，必须是 pre、pre-wrap 或 pre-line
显式加一句 white-space: pre-wrap; 是最稳妥的做法，既保留原始换行与空格，又允许内容自动折行（避免横向溢出）
不要对 <pre class="brush:php;toolbar:false;"></pre> 设置 text-align: justify 或 word-break: break-all，这些会干扰格式保留逻辑

pre 里嵌套 code 标签是语义最佳实践

纯文本用 <pre class="brush:php;toolbar:false;"></pre> 足够，但展示代码片段时，应该把实际代码包裹在 <code> 里：<pre class="brush:php;toolbar:false;"><code>console.log("hello");</code></pre>。这样既保持格式，又明确传达“这是可执行代码”，对无障碍访问（如屏幕阅读器）和 SEO 都有帮助。

使用场景：文档中的命令行输出、JSON 示例、HTML 片段、函数签名等需要逐字呈现的内容。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<code> 自身不保留换行，必须放在 <pre class="brush:php;toolbar:false;"></pre> 内才有效
多数语法高亮库（如 Prism.js、highlight.js）也依赖这个嵌套结构来定位和处理代码块
如果只用 <code> 不套 <pre class="brush:php;toolbar:false;"></pre>，缩进和空行会全部丢失

pre 在响应式布局中容易撑破容器，需主动限制宽度和滚动

<pre class="brush:php;toolbar:false;"></pre> 默认是块级元素，但它的内容不会自动折行——超长行会直接撑开父容器，导致水平滚动条出现在整个页面，而不是仅在代码块内。

性能 / 兼容性影响：移动端尤其明显，用户必须左右拖动才能看全内容，体验极差。

推荐组合样式：overflow-x: auto; + max-width: 100%; + white-space: pre-wrap;
避免用 word-wrap: break-word; 处理代码——它可能在单词中间断开，破坏语义（比如把 userEmail 拆成 userEma…）
如果内容全是短行，用 pre-wrap 就够了；若有不可折行的长字符串（如 base64、URL），才启用 overflow-x: auto