<pre>: 预格式化文本标签
最后更新：2026-10-13
<pre>预格式化文本标签
预格式文本，保留源代码中的空格与换行（等宽字体显示），适合展示代码、诗歌等需原样排版的文本。
| 分类 | 文本内容 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </pre> 标签 |
| 状态 | 标准 |
📝 语法
<pre>保留
缩进与
换行</pre>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <pre> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： pre 内的空白会原样显示，不要为了代码缩进在标签内加多余空格；常配合 code 使用。
❓ 常见问题
Qpre 里的换行和空格会保留吗？
A会，这正是
<pre> 的核心功能：源码中的空格、换行、缩进原样显示（浏览器默认对它应用 white-space: pre）。所以 pre 的 HTML 源码要注意起始标签后立即写内容，避免缩进被带进显示。Qpre 和 code 应该一起用吗？
A推荐组合：
<pre><code>代码</code></pre>——pre 负责保留排版，code 负责声明「这是代码」的语义。只用 pre 也能显示，但屏幕阅读器和搜索爬虫不知道内容是代码。Qpre 里的代码太长溢出怎么办？
A用 CSS 控制横向滚动：
pre { overflow-x: auto; }，容器限制宽度即可出现滚动条。避免用 white-space: pre-wrap 强行折行——代码被折断会影响可读性，滚动是更诚实的处理。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
