在HTML的默认渲染规则中，连续的空格、换行、制表符等空白字符都会被合并为一个普通空格，这导致很多时候我们手动输入的多行空格或者换行排版无法在页面上正常显示，需要借助特定的标签、实体或者CSS属性来实现多行空格的保留与显示。
使用pre标签保留多行空格
pre标签是HTML中专门用于保留文本原有格式的元素，它会完整保留文本中的空格、换行、缩进等空白字符，不会进行合并处理，同时默认使用等宽字体渲染内容。
使用pre标签的示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>pre标签示例</title>
</head>
<body>
<pre>
第一行内容
第二行缩进内容
第三行内容
</pre>
</body>
</html>
上述代码中pre标签内部的所有空格和换行都会原样显示在页面上，适合展示代码块、诗歌、预格式化文本等场景。不过pre标签会保留所有空白，如果内容中有过长的行，可能会出现横向滚动条。
使用 实体实现多行空格
是HTML中的不换行空格实体，每个 代表一个空格，不会被HTML合并，我们可以通过多个 的组合来实现多行空格的效果。
使用 的示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nbsp;示例</title>
</head>
<body>
<p>第一行内容</p>
<p> 第二行缩进四个空格</p>
<p> 第三行缩进八个空格</p>
</body>
</html>
这种方式的缺点是需要手动输入大量的 ，如果空格数量较多会非常繁琐，而且无法实现自动换行，适合少量固定空格的场景。
使用CSS的white-space属性控制
CSS的white-space属性可以设置元素内空白字符的处理方式，通过配置该属性可以在普通元素中实现多行空格的保留，不需要依赖pre标签或者 实体。
white-space常用取值说明如下：
| 取值 | 说明 |
|---|---|
| normal | 默认值，合并连续空白字符，文本自动换行 |
| nowrap | 合并连续空白字符，文本不换行 |
| pre | 保留所有空白字符，不自动换行，和pre标签效果一致 |
| pre-wrap | 保留所有空白字符，文本自动换行 |
| pre-line | 合并连续空格，保留换行符，文本自动换行 |
使用white-space属性实现多行空格的示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>white-space示例</title>
<style>
.multi-space {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="multi-space">
第一行内容
第二行缩进内容
第三行内容
</div>
</body>
</html>
这种方式灵活性更高，可以根据需求选择不同的取值，既保留空白又可以实现自动换行，适合大多数需要保留多行空格的场景。
不同方法的适用场景对比
- 如果需要完整保留文本原有格式，且不介意可能出现的横向滚动条，优先选择pre标签
- 如果只需要少量固定数量的空格，不需要换行，优先选择 实体
- 如果需要在普通元素中保留空白同时支持自动换行，优先选择CSS的white-space: pre-wrap配置
在实际开发中，我们可以根据具体的排版需求选择合适的方法，也可以将多种方法结合使用，达到更好的显示效果。
HTMLpre标签nbsp多行空格white_space修改时间：2026-07-21 23:54:25