CSS 如何保留 `块中的换行`

在本文中，我们将介绍如何在CSS中保留块中的换行。使用标签可以在HTML文档中显示代码片段，但该标签默认会将所有内容合并为一行显示，而不保留原来的换行。然而，在某些场景下，我们希望保留代码中的换行，以提高可读性和代码展示的准确性。

 阅读更多：<a href="https://sotoolbox.com/tag/CSS"
 target="_blank" rel="nofollow">CSS 教程
 使用white-space属性
 CSS的white-space属性控制元素内空白字符的处理方式，包括空格、换行符、制表符等。通过设置不同的属性值，我们可以实现在  块中保留换行的效果。
           以下是white-space属性的常用属性值：
<ul> 
 <li><code>normal</code>：默认值，连续的空白字符被合并为一个空格，换行符被当作普通空格处理。</li> 
 <li><code>pre</code>：空白字符会被保留，如何书写代码时，有几个空格就会显示几个空格，但仍会忽略连续的空白字符。</li> 
 <li><code>pre-line</code>：保留换行符，合并连续的空白字符为一个空格。</li> 
 <li><code>pre-wrap</code>：保留换行符和连续的空白字符。</li> 
</ul> <p>下面是一个示例，演示如何使用white-space属性在 <code> 块中保留换行：</code></p><code> <pre><code>code {white-space: pre;
}
 
在上述示例中，我们为  元素定义了white-space属性的值为pre，这样可以保留  块中的换行。
 使用escapes字符
 除了使用white-space属性外，我们还可以使用CSS的escapes字符来保留  块中的换行。通过使用换行符的转义字符a，我们可以在代码中插入换行符，使代码在浏览器中保留换行效果。
 以下是一个示例，演示如何使用escapes字符在  块中保留换行：
 <code>
  p {
color: red;
font-size: 14px;
}a
  span {
color: blue;
font-size: 12px;}
</code>
 在上述示例中，我们在两个CSS代码块之间使用了转义字符a来插入换行符。这样，代码在浏览器中展示时就会保留换行效果。
             使用pre标签
 除了上述方法外，我们还可以使用HTML的 <pre> 标签来包裹代码块，这样可以在浏览器中保留代码的原始格式，包括换行和空格。
 以下是一个示例，演示如何使用 <pre> 标签来保留代码块中的换行：
 <pre>
  <code>
p {
  color: red;
  font-size: 14px;
}

span {
  color: blue;
  font-size: 12px;
}</code>
</pre>
 在上述示例中，我们使用 <pre> 标签包裹了 <code> 标签，这样可以保留代码块中的原始格式。
 总结
 在本文中，我们介绍了三种方法来保留  块中的换行。通过使用CSS的white-space属性，并设置不同的属性值，我们可以实现在  块中保留换行的效果。此外，我们还介绍了使用escapes字符来插入换行符，以及使用 <pre> 标签来保留代码的原始格式。
 根据实际需要，选择适合的方法来保留  块中的换行，可以提高代码的可读性和展示效果。希望本文对您有所帮助！