html中如何使用pre标签对空行和空格进行控制

# HTML中如何使用pre标签对空行和空格进行控制

在HTML中，默认会忽略代码中的连续空格和换行符，将它们合并为单个空格。当我们需要保留文本的原始格式（如代码块、诗歌等）时，`<pre>`标签（preformatted text的缩写）就成为了关键工具。

## pre标签的基本特性

`<pre>`标签会保留文本中的所有空格和换行符，并以等宽字体显示内容：

```html
<pre>
  这是   保留  空格的
  文本
  换行也会被保留
</pre>

实际应用场景

1. 代码展示：最常用于显示代码片段

<pre>
  function hello() {
    console.log("Hello World");
  }
</pre>

1. ASCII艺术：保持字符画格式

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

1. 诗歌排版：保留诗句的断行和缩进

注意事项

• 默认会有较宽的边距，可通过CSS调整：

pre {
  margin: 0;
  padding: 10px;
  background: #f5f5f5;
}

• 内容过长时可能溢出容器，建议添加：

pre {
  overflow-x: auto;
  white-space: pre-wrap;
}

• 需要显示HTML特殊字符时（如<、>），仍需使用实体编码

通过合理使用<pre>标签，可以轻松解决HTML中空格和换行符被压缩的问题，完美呈现需要保留原始格式的文本内容。 “`