HTML多行空格保留与显示技巧

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《HTML多行空格保留与显示方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

答案是使用

标签、&nbsp;实体、<br>标签或CSS的white-space属性来保留空格和换行。其中，<pre>可预格式化文本，&nbsp;插入不可折叠空格，<br>实现强制换行，而CSS的white-space属性（如pre-wrap、pre-line）提供更灵活、语义化的控制方式，推荐结合CSS进行样式管理以实现内容与表现分离。</p></blockquote><p><img src="/uploads/20251103/1762133468690805dc5c50c.png" alt="html如何多行空格_HTML多行空格（pre/ ）保留与显示方法"></p><p>HTML在处理多余的空格和换行符时，默认会进行折叠。如果你想在网页中实现多行空格、保留文本的原始格式（包括多个空格和换行），核心方法是使用<code><pre></code>标签来预格式化文本，或者通过<code>&nbsp;</code>实体来插入非断行空格，以及利用<code><br></code>标签强制换行。更现代且灵活的做法，则是借助CSS的<code>white-space</code>属性。</p><h3>解决方案</h3><p>我们在编写HTML内容时，经常会遇到一个“怪异”的现象：无论我在编辑器里敲了多少个空格，或者按了多少次回车键，浏览器渲染出来的时候，它们通常只会变成一个单一的空格，换行也只有在<code><p></code>或<code><div></code>等块级元素之间才比较明显。这是HTML设计之初就有的特性，为了内容的语义化和流式布局，它倾向于“清理”掉那些被认为是多余的空白。</p><p>要解决这个问题，我们需要一些特定的工具和策略：</p><ol><li><p><strong><code><pre></code> 标签：预格式化文本</strong>
这个标签是处理多行空格和保留原始格式的“瑞士军刀”。当浏览器遇到<code><pre></code>标签时，它会完全按照源代码中书写的样子来显示文本，包括所有的空格、制表符和换行符。这对于展示代码片段、ASCII艺术或者任何需要精确保留格式的文本来说，简直是天赐之物。</p><pre class="brush:html;toolbar:false;"><pre>
这是一个
    带有    多重
空格和换行
    的文本。

渲染效果会是：

这是一个
    带有    多重
空格和换行
    的文本。

需要注意的是，

</code>标签内的文本通常会以等宽字体（monospaced font）显示，如果你不喜欢这种默认样式，可以通过CSS来调整。</p></li><li><p><strong><code>&nbsp;</code> 实体：非断行空格</strong><code>&nbsp;</code>是“non-breaking space”的缩写，它代表一个不会被浏览器折叠、也不会导致换行的空格。如果你想在两个单词之间插入一个或多个额外的空格，并且确保它们不会在行尾被拆开，<code>&nbsp;</code>就派上用场了。</p><pre class="brush:html;toolbar:false;"><p>这个&nbsp;&nbsp;&nbsp;单词之间有三个非断行空格。</p>

渲染效果会是：

这个   单词之间有三个非断行空格。

但说实话，如果只是为了视觉上的多重空格而大量使用 ，代码会变得非常冗长且难以维护，而且语义上也有点奇怪。它更适合在特定场景下，比如防止日期和数字之间换行。


标签：强制换行
（break）标签很简单，它就是告诉浏览器“在这里给我换一行”。它不像

标签那样会创建一个新的段落，只是单纯地插入一个行中断。

<p>第一行文本。<br>第二行文本。<br><br>这里有两行空行。</p>

渲染效果会是：

第一行文本。
第二行文本。

这里有两行空行。

这种方式可以有效地实现多行空行，但如果只是为了增加元素之间的垂直间距，CSS的margin或padding会是更优的选择。

CSS white-space 属性：更灵活的控制 这是我个人最推荐的方式，因为它将样式控制权完全交给了CSS，让HTML保持内容的纯粹。white-space属性有几个值可以模拟甚至超越

</code>和<code>&nbsp;</code>的效果：</p><ul><li><code>white-space: pre;</code>：行为与<code><pre></code>标签完全一致，保留所有空格和换行，不自动换行。</li><li><code>white-space: pre-wrap;</code>：保留所有空格和换行，但会在需要时自动换行（word-wrap）。这是<code><pre></code>的一个很好的替代品，因为它在保留格式的同时，避免了文本溢出容器。</li><li><code>white-space: pre-line;</code>：折叠多个空格，但保留换行符。如果你只想保留文本中的换行，而不在乎多个空格，这个就很合适。</li><li><code>white-space: normal;</code>：默认值，折叠所有多余的空格和换行。</li></ul><pre class="brush:html;toolbar:false;"><div style="white-space: pre-wrap; border: 1px solid #ccc; padding: 10px;">
这是一个
    带有    多重
空格和换行
    的文本，并且会自动换行。
</div>

这种方式的优点是，你可以将这种样式应用到任何块级元素上，而不仅仅是

</code>，从而获得更大的灵活性和语义化优势。</p></li></ol><h3>为什么HTML默认会“吃掉”我的多余空格和换行符？</h3><p>这其实是HTML设计哲学的一个体现，也是许多初学者会感到困惑的地方。简单来说，HTML被设计为一种结构化文档语言，它的核心任务是定义内容的语义和结构，而不是精确地控制内容的视觉呈现。浏览器在解析HTML时，会遵循一套关于空白字符处理的规则，这套规则被称为“空白折叠”（whitespace collapsing）。</p><p>想象一下，如果HTML严格按照你敲击键盘的每一个空格和回车来渲染，那么网页的布局将变得异常脆弱。一个不小心多敲了一个空格，或者换行符的位置稍微变动，都可能导致页面错乱。为了让内容在不同的设备、不同的屏幕尺寸下都能保持良好的可读性和流动性，HTML和浏览器选择了一种更“宽容”的空白处理方式。</p><p>具体来说，浏览器在渲染文本时，会将连续的空格、制表符、换行符（包括<code>\n</code>和<code>\r</code>）合并成一个单一的空格。这意味着：</p><ul><li><code>Hello        World</code> 会被渲染成 <code>Hello World</code>。</li><li><code>Hello\n\n\nWorld</code> （在HTML源代码中输入多个回车）也会被渲染成 <code>Hello World</code>。</li></ul><p>这种行为是为了让内容能够“流式”布局，适应不同的视口宽度。开发者应该通过CSS来精确控制元素的间距、文本的对齐和换行规则，而不是依赖HTML源代码中的空白字符。这种“内容与表现分离”的原则，是现代Web开发的基础。我们用HTML定义“是什么”，用CSS定义“长什么样”，这让我们的代码更清晰、更易于维护，也更有利于网页的无障碍访问。</p><h3>除了<code><pre></code>和<code>&nbsp;</code>，还有哪些更现代或语义化的方式来控制文本的空白区域？</h3><p>确实，虽然<code><pre></code>和<code>&nbsp;</code>能解决问题，但在很多情况下，它们并不是最佳实践，尤其是在追求语义化和可维护性的时候。现代Web开发更倾向于使用CSS来控制视觉呈现，包括空白区域。</p><p>最核心的，无疑是前面提到的 <strong>CSS <code>white-space</code> 属性</strong>。它提供了对文本内部空白处理的精细控制，远比简单地插入<code>&nbsp;</code>或使用<code><pre></code>标签来得灵活：</p><ul><li><strong><code>white-space: pre-wrap;</code></strong>: 我个人非常喜欢这个。它既能保留源代码中的所有空格和换行符（像<code><pre></code>一样），又能让文本在达到容器边缘时自动换行。这意味着你可以在后端生成格式化的文本（比如用户输入的带换行符的评论），然后直接显示在前端，而不用担心内容溢出或者丢失格式。这比纯粹的<code><pre></code>更具适应性。</li><li><strong><code>white-space: pre-line;</code></strong>: 如果你只想保留文本中的换行符，而对多个空格不感兴趣（让它们折叠成一个），这个属性就非常适合。例如，用户在文本框中输入的内容，你可能希望保留其段落结构，但不需要精确到每个空格。</li></ul><p>除了<code>white-space</code>，还有一些CSS属性可以间接或直接地控制文本和元素之间的“空白”：</p><ul><li><strong><code>margin</code> 和 <code>padding</code></strong>: 这两个是控制元素外部和内部空间最常用的属性。如果你需要增加段落之间、图片与文字之间、或者任何块级元素之间的“多行空格”，用<code>margin-top</code>、<code>margin-bottom</code>、<code>padding-top</code>、<code>padding-bottom</code>远比插入多个<code><br></code>标签来得语义化和精准。</li><li><strong><code>line-height</code></strong>: 这个属性控制文本行之间的垂直距离。通过调整<code>line-height</code>，你可以增加或减少文本的“行间距”，从而在视觉上模拟多行空格的效果，让段落看起来更疏松或紧凑。</li><li><strong><code>text-indent</code></strong>: 用于设置文本块第一行的缩进。这是一种常见的段落开头“空白”处理方式，比使用多个<code>&nbsp;</code>来模拟缩进要好得多。</li><li><strong><code>word-spacing</code> 和 <code>letter-spacing</code></strong>: 这两个属性分别控制单词之间和字母之间的间距。虽然不是直接处理多行空格，但它们可以调整文本的整体密度和视觉效果，有时也能达到类似“增加空白”的感觉。</li><li><strong>Flexbox 和 Grid</strong>: 对于更复杂的布局，Flexbox和Grid布局系统提供了强大的工具来控制元素之间的空间。你可以使用<code>gap</code>属性（在Flexbox和Grid中）或者<code>justify-content</code>、<code>align-items</code>等属性来分布子元素，从而自然地创建出各种空白区域，而无需依赖HTML中的空白字符。</li></ul><p>举个例子，如果你想让一段文本在视觉上看起来有“多行空格”，但又不想用<code><pre></code>或<code>&nbsp;</code>破坏语义，你可以这样做：</p><pre class="brush:html;toolbar:false;"><p class="spaced-text">
    这是第一行内容。
    这是第二行内容。
    这是第三行内容。
</p>

.spaced-text {
    white-space: pre-line; /* 保留换行，折叠空格 */
    line-height: 2.0;      /* 增加行高，模拟更多垂直空间 */
    margin-bottom: 1em;    /* 段落下方增加间距 */
}

这样，你在HTML中只需要输入自然的换行，而所有的视觉效果都由CSS来控制，既保持了代码的清晰，又提供了丰富的表现力。这是我个人在实际项目中更偏爱的做法。

使用

</code>和<code>&nbsp;</code>时，有哪些常见的陷阱或需要注意的最佳实践？</h3><p>虽然<code><pre></code>和<code>&nbsp;</code>在特定场景下是有效的解决方案，但如果不加区分地滥用，可能会带来一些意想不到的问题。</p><p><strong>关于 <code><pre></code> 标签：</strong></p><ul><li><strong>语义优先原则：</strong> <code><pre></code>标签的语义是“预格式化文本”，意味着它的内容必须严格按照源代码的格式显示。最佳实践是，只在内容本身就需要这种精确格式时使用它，比如代码示例、ASCII艺术、日志输出或者其他需要保留原始空白和换行的纯文本数据。如果只是为了获得多行空格或换行效果，而内容本身并非预格式化的，那么使用CSS的<code>white-space</code>属性会更语义化。</li><li><strong>默认样式问题：</strong> 浏览器通常会给<code><pre></code>标签应用等宽字体（<code>font-family: monospace;</code>）。如果你不希望是这种字体，或者想调整字号、颜色、行高，都需要通过CSS来覆盖默认样式。</li><li><strong>内容溢出风险：</strong> <code><pre></code>默认不会自动换行。这意味着如果你的预格式化文本行太长，它可能会溢出父容器，导致水平滚动条出现，或者在没有滚动条时直接被截断，影响用户体验。为了解决这个问题，通常需要配合CSS：<pre class="brush:css;toolbar:false;">pre {
    white-space: pre-wrap; /* 既保留格式又自动换行 */
    word-wrap: break-word; /* 强制长单词断开 */
    overflow-x: auto;      /* 如果还是溢出，显示水平滚动条 */
}

这里使用pre-wrap实际上是改变了

的默认行为，让它在保留格式的同时也能自动换行，这在很多场景下比纯粹的pre更实用。

可访问性考量： 屏幕阅读器可能会逐字逐句地朗读

标签内的所有内容，包括大量的空格和换行，这可能会让视障用户感到困惑或沮丧。因此，在展示非常冗长或复杂的预格式化文本时，可能需要考虑提供一个更简洁的替代描述或摘要。

关于   实体：

• 滥用为布局工具： 这是最常见的陷阱。许多开发者为了在视觉上创建多个空格或缩进，会大量使用   。这种做法是反模式的。它会使HTML代码变得冗长、难以阅读和维护。更重要的是，它将表现层（视觉间距）的控制权硬塞进了结构层（HTML），违背了内容与表现分离的原则。正确的做法是使用CSS的margin、padding、text-indent、word-spacing等属性来控制视觉间距。
• 语义与可访问性：  的语义是“非断行空格”，它的核心作用是防止在它所在的位置发生换行，而不是单纯地提供一个额外的空格。比如，在“100 kg”中，你希望“100”和“kg”始终在一起。屏幕阅读器在遇到 时，可能会有不同的处理方式，有些会忽略，有些会读作“non-breaking space”或者只是停顿一下，如果连续使用多个，可能会干扰阅读流畅性。
• 输入效率： 手动输入多个 效率低下，容易出错。在需要大量空白的场景下，CSS无疑是更高效和可控的方案。
• 替代方案：
  • 增加单词间距： 使用 word-spacing CSS属性。
  • 增加段落缩进： 使用 text-indent CSS属性。
  • 增加元素间距： 使用 margin 或 padding CSS属性。
  • 防止换行： 除了 ，也可以使用CSS的white-space: nowrap;属性应用到父元素上，或者使用包裹需要保持在一起的文本并应用display: inline-block;。

总结来说，

和 都是HTML标准的一部分，有其存在的价值和特定用途。但作为现代Web开发者，我们应该理解它们的语义，并在合适的时候选择更现代、更灵活、更符合“内容与表现分离”原则的CSS解决方案。避免用HTML标签来“hack”布局，而是让CSS承担起它应有的样式控制职责。
到这里，我们也就讲完了《HTML多行空格保留与显示技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于white-space,pre标签, ,HTML多行空格,空白折叠的知识点！