pre标签不好用？HTML中pre标签保留文本格式的小技巧

想在HTML中保留文本的原始格式吗？

标签帮你轻松实现！本文深入解析<pre>标签的妙用，让你掌握如何在网页上“原样”呈现代码片段、诗歌等需要精确格式的内容。从基本用法、与<code>标签的结合、特殊字符处理，到CSS样式自定义和响应式设计中的注意事项，一网打尽。了解<pre>标签与<div>、<p>的区别，以及如何利用`overflow`和`white-space`属性处理长文本，确保在各种屏幕尺寸下的最佳可读性。掌握这些技巧，让你的网页内容更专业、更易读。
</p><p><pre>标签用于预格式化文本，保留空格和换行。1. 它与HTML默认处理方式不同，能原样显示代码、诗歌等内容；2. 可嵌套内联元素如<a>、<code>等，常与<code>标签结合使用以展示代码；3. 需对特殊字符进行HTML实体编码或使用<pre><code>组合；4. 支持CSS样式控制，如字体、背景色、行高及自动换行；5. 与<div>或<p>的区别在于空白符的处理方式；6. 在响应式设计中可通过overflow和white-space属性处理长文本，确保不同屏幕下的可读性。</p><p><img src="/uploads/20250619/17503406846854144ca5b4e.png" alt="html中pre标签用法 html中pre保留格式文本显示"></p><p>使用<code><pre></code>标签，你可以在HTML中保留文本的原始格式，包括空格和换行。简单来说，它能让你的代码片段、诗歌或者任何需要精确格式的内容，在网页上“原样”呈现。</p><img src="/uploads/20250619/17503406846854144cb2648.png" alt="html中pre标签用法 html中pre保留格式文本显示"><p>解决方案</p><img src="/uploads/20250619/175034068868541450806d0.png" alt="html中pre标签用法 html中pre保留格式文本显示"><p><code><pre></code>标签的核心功能是预格式化文本。这意味着浏览器会按照文本在HTML源代码中的排版方式来显示它，而不会忽略空格、制表符和换行符。这与HTML处理文本的默认方式截然不同，默认情况下，HTML会将多个连续的空格压缩为一个，并且忽略换行符。</p><img src="/uploads/20250619/1750340688685414508b2ea.png" alt="html中pre标签用法 html中pre保留格式文本显示"><p>基本用法非常简单：</p><pre class="brush:html;toolbar:false;"><pre>
  这段文本
  将会按照
  你写的格式显示。
  包括 空格 和 换行。

这段代码在浏览器中会完全按照上面的格式显示，而不是像普通文本那样被压缩成一行。

</code>标签内可以包含其他内联元素，比如<code><a></code>、<code><code></code>、<code><strong></code>等，以便对文本进行进一步的样式化或添加链接。</p><p><code><pre></code>标签的一个常见用途是显示代码片段。但是，直接将代码放入<code><pre></code>标签中可能会有问题，因为HTML会将一些特殊字符（如<code><</code>和<code>></code>）解释为标签。为了避免这种情况，你需要对这些字符进行HTML实体编码。例如，<code><</code>应该被替换为<code>&lt;</code>，<code>></code>应该被替换为<code>&gt;</code>。</p><p>或者，更方便的方法是结合使用<code><pre></code>和<code><code></code>标签：</p><pre class="brush:html;toolbar:false;"><pre><code>
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;我的网页&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;你好，世界！&lt;/h1&gt;
    &lt;/body&gt;
  &lt;/html&gt;
</code>

标签用于表示代码文本，而

</code>标签则负责保留代码的格式。大多数代码高亮库（比如Prism.js或Highlight.js）都推荐使用这种组合方式。</p><p>如何自定义<code><pre></code>标签的样式？</p><p>虽然<code><pre></code>标签会保留文本格式，但你仍然可以使用CSS来控制它的外观。比如，你可以修改字体、颜色、背景色、行高等。</p><pre class="brush:css;toolbar:false;">pre {
  font-family: monospace; /* 使用等宽字体 */
  background-color: #f0f0f0; /* 设置背景色 */
  padding: 10px; /* 添加内边距 */
  overflow: auto; /* 如果内容超出容器，则显示滚动条 */
  white-space: pre-wrap; /* 允许长文本换行 */
}

white-space: pre-wrap;是一个特别重要的属性，它可以让

</code>标签内的长文本自动换行，而不会超出容器的宽度。这对于显示较长的代码行非常有用。</p><p><code><pre></code>标签与其他HTML元素有什么区别？为什么不用<code><div></code>或者<code><p></code>？</p><p>主要区别在于对空白字符的处理方式。<code><div></code>和<code><p></code>等标签会忽略多余的空格和换行符，并将多个连续的空格压缩为一个。而<code><pre></code>标签则会保留所有空白字符，按照文本在源代码中的格式显示。</p><p>此外，浏览器通常会为<code><pre></code>标签应用一个默认的等宽字体（monospace），这使得它非常适合显示代码或需要精确对齐的文本。</p><p>虽然你可以使用CSS来模拟<code><pre></code>标签的效果，但这样做通常比较麻烦，而且可能会引入一些意想不到的问题。直接使用<code><pre></code>标签通常是更简单、更可靠的选择。</p><p><code><pre></code>标签在响应式设计中需要注意什么？</p><p>在响应式设计中，你需要确保<code><pre></code>标签内的内容在不同屏幕尺寸下都能正确显示。一个常见的问题是，如果<code><pre></code>标签内的文本太长，可能会导致页面出现水平滚动条。</p><p>为了解决这个问题，你可以使用<code>overflow: auto;</code>或<code>overflow-x: auto;</code>属性来让<code><pre></code>标签在内容超出容器时显示滚动条。</p><p>此外，<code>white-space: pre-wrap;</code>属性也可以帮助你处理长文本，让它在容器内自动换行。</p><p>最后，你可能需要根据不同的屏幕尺寸调整<code><pre></code>标签的字体大小和内边距，以确保文本的可读性。</p><pre class="brush:css;toolbar:false;">pre {
  overflow-x: auto;
  white-space: pre-wrap;
  font-size: 0.8em; /* 在小屏幕上减小字体大小 */
}

@media (min-width: 768px) {
  pre {
    font-size: 1em; /* 在大屏幕上恢复字体大小 */
  }
}

总结来说，

标签是一个非常有用的HTML元素，可以让你在网页上保留文本的原始格式。通过结合使用标签和适当的CSS样式，你可以轻松地显示代码片段、诗歌或者任何需要精确格式的内容。在响应式设计中，要注意处理长文本，确保内容在不同屏幕尺寸下都能正确显示。
到这里，我们也就讲完了《pre标签不好用？HTML中pre标签保留文本格式的小技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于html,CSS,代码,格式,
标签的知识点！