HTML中如何无需使用nbsp即可保留并正常显示文本中的多余空格

核心方案：使用CSS white-space 属性 #

这是最通用、易维护的实现方式，无需修改原始文本内容，仅通过样式控制即可生效，可根据需求选择对应的属性值：

• white-space: pre：完全保留所有空格、换行，文本不会自动换行，超出容器边界时会溢出
• white-space: pre-wrap：保留所有空格、换行，文本超出容器边界时会自动换行，是日常场景最常用的取值
• white-space: break-spaces：行为和pre-wrap基本一致，差异在于行尾的空格也会保留，溢出时换行位置会包含空格本身

代码示例：

/* 给需要保留空格的元素添加该样式 */
.reserve-space {
  white-space: pre-wrap;
}

<p class="reserve-space">This is some        test print</p>

上述代码渲染后会完整保留文本中间的所有多余空格，同时文本可以正常换行。

其他可选方案 #

如果不想通过CSS实现，也可以用HTML原生标签达成效果：

• 使用<pre>标签包裹文本：该标签默认自带white-space: pre的样式，会保留所有空格和换行，本身语义对应预格式化文本，适合展示代码、诗歌、固定排版的文本内容。
  代码示例：

<pre>This is some        test print</pre>

注意：<pre>标签默认会使用等宽字体渲染文本，如果需要和页面其他文本字体保持一致，可以额外给<pre>设置font-family: inherit覆盖默认样式即可。

方案选择建议 #

• 普通文本排版场景优先选择CSS white-space方案：灵活性最高，可以按需控制换行行为，不需要修改HTML语义结构
• 预格式化内容（比如代码、固定排版的文本）场景选择<pre>标签，更符合HTML语义规范

内容的提问来源于stack exchange，提问作者E.D.