讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

HTML如何设置预格式化文本？pre标签的作用是什么？

幻夢星雲

发布： 2025-08-16 21:57:02

原创

822人浏览过

<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">标签的核心作用是原样保留文本中的所有空白符和换行符，并默认使用等宽字体显示；2. 常规html标签如<p>或<div>会折叠连续空白符并忽略换行符，这是为了排版灵活性，但不适用于需要精确格式的内容；3. <pre class="brush:php;toolbar:false;">用于格式保留，<code>用于语义标记代码，二者可嵌套使用，推荐结构为<pre class="brush:php;toolbar:false;"><code>...</code>

登录后复制

，兼顾格式与语义；4. 可通过css自定义<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">样式，包括设置字体、背景色、边框、内边距以及通过overflow-x: auto添加水平滚动条处理长文本；5. white-space属性可进一步控制空白处理方式，pre-wrap允许长行自动换行，pre-line保留换行但折叠空格，适用于不同场景。使用<pre class="brush:php;toolbar:false;">标签能有效解决html中文本格式丢失问题，尤其适合展示代码、诗歌或日志等需保留原始布局的内容。</p><p>@@##@@</p><p>HTML中，你可以通过<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签来设置预格式化文本。这个标签最核心的作用就是“原样保留”——它会忠实地呈现文本中所有的空白符（包括空格、制表符和换行符），并且默认情况下，浏览器会使用等宽字体来显示其内容，确保每一行文字的排版都和你输入时一模一样。

登录后复制

标签来设置预格式化文本非常直接。你只需要将需要保留原始格式的文本内容包裹在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签之间。比如，如果你想展示一段代码或者一些ASCII艺术字，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签就是你的首选。浏览器在解析到<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签时，就不会像处理普通文本那样折叠多个连续的空格为一个，也不会忽略换行符。它会把你的每一个字符、每一个空白都当回事儿，严格按照你写在HTML文件里的样子来渲染。这对于展示代码片段、诗歌、日志输出或者任何需要精确控制文本布局的场景来说，简直是救星。

为什么常规HTML标签无法保留文本格式？

<p>这其实是HTML和浏览器设计的一个基本行为。当你使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p>

登录后复制

、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div>

登录后复制

或者<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><span>

登录后复制

这类常规块级或行内元素来放置文本时，浏览器在渲染前会对文本进行一个“标准化”处理。具体来说，它会将文本中连续的多个空白字符（包括空格、制表符、换行符等）折叠成一个单一的空格。同时，换行符本身在这些标签中也不会被渲染成实际的换行，除非你显式地使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br>

登录后复制

标签。

<p><span>立即学习“前端免费学习笔记（深入）”；

<p>这种默认行为的设计初衷，是为了让网页内容更具可读性和排版灵活性，避免作者因为不小心多打了几个空格或回车而导致页面布局混乱。比如，你在HTML源码里写了一大段文字，为了方便阅读，可能每隔几行就敲个回车，或者在单词之间多敲了几个空格。如果浏览器把这些都原样呈现，那页面可能就乱套了。但对于像代码、诗歌或日志这类内容，这种“聪明”的折叠行为反而成了障碍，因为它们的格式本身就是内容的一部分。所以，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签就是为了打破这种默认行为而存在的，它告诉浏览器：“嘿，这段文本，你别自作主张了，我怎么写的，你就怎么显示！”

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
标签与<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code>
登录后复制
标签有什么区别？它们可以一起使用吗？

<p>这是一个非常常见的问题，也涉及到HTML的语义化。简单来说，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签关注的是“格式”（Presentation），它负责保留文本的空白和排版；而<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code>

登录后复制

标签关注的是“语义”（Semantics），它告诉浏览器和开发者，其内部包裹的是一段计算机代码。

登录后复制

标签本身并不会改变文本的显示格式，比如它不会让文本等宽，也不会保留空白符。它主要的作用是为内容提供语义上的标记，这对于搜索引擎优化、辅助技术（如屏幕阅读器）以及代码高亮库来说都非常重要。它让机器知道：“哦，这部分内容是代码。”

<p>那么，它们可以一起使用吗？答案是：不仅可以，而且在展示代码块时，这是非常推荐的最佳实践。你可以将<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code>

登录后复制

标签嵌套在<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

登录后复制

标签内部，形成<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">

<code>...

登录后复制

的结构。

巧文书 <p>巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

<span>281

<span>查看详情巧文书

<p>这样做的好处是显而易见的：

格式保留： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
确保了代码的缩进、换行和空格都原封不动地显示出来，保持了代码的可读性。
语义清晰： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code>
登录后复制
明确地告诉了浏览器、搜索引擎和开发者，这段内容是代码，而不是普通的文本。这有助于提升网页的语义结构和可访问性。
样式和脚本： 结合使用时，你可以更容易地对代码块进行样式化（比如添加背景色、边框）或应用代码高亮库，因为它们可以根据<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">pre code
登录后复制
选择器来精准地定位和处理。

<p>例如：

<code>
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");
登录后复制

<p>这种组合完美地兼顾了内容的显示需求和语义表达。

如何自定义<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
标签的样式和行为？

登录后复制

标签有其默认的显示行为（保留空白、等宽字体），但在实际开发中，我们经常需要对其进行更精细的控制，比如改变字体、背景色、边框，或者处理长文本的显示问题。这都可以通过CSS来实现。

<p>以下是一些常见的自定义方式和CSS属性：

<p>改变字体和字号： 默认的等宽字体可能不符合你的设计需求。你可以通过<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">font-family
登录后复制
和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">font-size
登录后复制
来调整。
```
pre {
    font-family: "Cascadia Code", "Fira Code", monospace; /* 使用多种等宽字体，提供备选 */
    font-size: 0.9em; /* 稍微缩小字号 */
}
```
登录后复制

<p>背景、边框和内边距： 为了让代码块更突出，通常会给它设置背景色、边框和内边距。

pre {
    background-color: #f6f8fa; /* GitHub风格的浅灰色背景 */
    border: 1px solid #e1e4e8; /* 细边框 */
    padding: 15px; /* 内部留白 */
    border-radius: 6px; /* 圆角 */
}

登录后复制

<p>处理长行文本：水平滚动条： 这是非常重要的一点。如果代码行太长，超出了<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
元素的宽度，默认情况下可能会导致内容溢出或布局混乱。最佳实践是添加水平滚动条，让用户可以左右滑动查看完整内容。
```
pre {
    overflow-x: auto; /* 当内容超出时显示水平滚动条 */
}
```
登录后复制
<p>有时，你可能还会看到<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">overflow-y: hidden;
登录后复制
，这通常是为了防止垂直滚动条的出现，但对于代码块来说，垂直滚动条是常见的，所以不一定需要。
<p>控制空白符的行为（<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space
登录后复制
）：虽然<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
的默认<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space
登录后复制
值就是<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">pre
登录后复制
（保留所有空白），但了解这个属性可以让你在特定场景下进行微调。
- <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space: pre-wrap;
  登录后复制
  ：保留空白和换行，但当行内容超出容器时会自动换行。这对于那些不希望出现水平滚动条、但又需要保留原始格式的文本（比如长段落的诗歌）非常有用。
- <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space: pre-line;
  登录后复制
  ：保留换行符，但会折叠连续的空白符。这类似于<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p>
  登录后复制
  标签的行为，但会保留你源码中的换行。
<p>通常情况下，对于代码块，我们希望保持<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">white-space: pre;
登录后复制
的默认行为，结合<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">overflow-x: auto;
登录后复制
来实现精确的格式控制和可滚动性。但如果你在用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">
登录后复制
登录后复制
展示非代码的长文本，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">pre-wrap
登录后复制
可能是一个更好的选择。