在HTML页面渲染过程中，浏览器默认会将连续的空格合并为一个，同时忽略文本中的多余换行，这导致很多需要保留原始格式的内容无法直接正确展示。pre标签就是专门用来解决这个问题的原生HTML标签，它可以完整保留文本内的空格、换行、制表符等格式，让内容按照原有排版展示。
pre标签的基本用法
pre标签的使用非常简单，只需要把需要保留格式的文本放在<pre>和</pre>标签之间即可，浏览器会按照等宽字体渲染其中的内容，同时保留所有的空格和换行。下面是一个基础的使用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pre标签示例</title>
</head>
<body>
<p>普通段落文本：
这是一段 有多个空格
还有换行的文本</p>
<pre>
pre标签内的文本：
这是一段 有多个空格
还有换行的文本
</pre>
</body>
</html>运行上面的代码可以明显看到，普通<p>标签内的连续空格被合并，换行也没有生效，而<pre>标签内的文本完整保留了原有的空格和换行格式。
pre标签的适用场景
pre标签非常适合以下场景使用：
- 展示代码片段，保留代码的缩进和换行，方便阅读
- 展示格式化后的日志、配置文件内容，避免格式错乱
- 展示诗歌、歌词等需要固定排版的文本内容
- 展示ASCII艺术字符画，保留字符的排列布局
使用pre标签的注意事项
虽然pre标签使用很方便，但是也有一些需要注意的点：
1. 字体样式
pre标签默认使用等宽字体渲染内容，如果需要修改字体，可以通过CSS的font-family属性自定义，但是建议保留等宽特性，否则可能影响格式展示效果。
2. 内容转义
如果pre标签内需要展示包含HTML特殊字符的内容，比如<、>、&等，需要对这些字符进行转义，否则浏览器会将其解析为HTML标签。如果是展示代码内容，转义后可以避免代码被浏览器执行。
3. 宽度溢出问题
当pre标签内的文本行长度超过容器宽度时，默认不会自动换行，会导致内容溢出。如果需要让长行自动换行，可以添加如下CSS样式：
pre {
white-space: pre-wrap; /* 保留空格换行，同时允许自动换行 */
word-wrap: break-word; /* 长单词或URL地址换行 */
}其他保留文本格式的方法
除了使用pre标签，也可以通过CSS的white-space属性实现文本格式保留，不需要使用额外的HTML标签。常用的属性值如下：
| 属性值 | 空格处理 | 换行处理 | 自动换行 |
|---|---|---|---|
| normal | 合并连续空格 | 忽略换行 | 允许 |
| pre | 保留所有空格 | 保留换行 | 不允许 |
| pre-wrap | 保留所有空格 | 保留换行 | 允许 |
| pre-line | 合并连续空格 | 保留换行 | 允许 |
如果只需要在普通标签内保留换行同时合并多余空格，可以使用white-space: pre-line；如果需要完整保留所有格式同时支持自动换行，使用white-space: pre-wrap即可，效果和添加了自动换行样式的pre标签一致。