在HTML5开发中，浏览器默认会把连续的空白字符合并成一个空格，并且在容器宽度不足时自动换行。如果希望内容中的空格被原样保留并且不换行，可以使用 实体或者CSS的white-space属性来控制。
使用 表示不间断空格
HTML中的 是non-breaking space的缩写，代表一个不会被浏览器合并、也不会在此处发生换行的空格。当需要手动增加多个空格且防止换行时，可以连续书写多个 。
<p>姓名： 张三</p> <p>这段 文字 中的空格不会被合并</p>
上面的写法会让“姓名：”和“张三”之间保留三个空格，并且整段不会在空格处折行。不过 是硬编码的空格，不适合大段文本或动态内容。
使用CSS white-space保留空格不换行
CSS的white-space属性可以统一控制元素内空白符和换行的处理。常用的值有：
- normal：默认，合并空格，自动换行
- nowrap：合并空格，但不换行
- pre：保留空格和换行，类似pre标签
- pre-wrap：保留空格和换行，且自动换行
- pre-line：合并空格，但保留换行
若想保留空格并且禁止换行，可以使用white-space: pre;或者white-space: nowrap;。其中pre会保留源代码中的空格与回车，nowrap只禁止换行但仍合并空格。
.no-wrap {
white-space: nowrap;
}
.keep-space {
white-space: pre;
}
<div class="keep-space"> 文本 保留 所有 空格 并且不自动换行 </div>
两种方式如何选择
如果是少量固定文本需要增加视觉间隔，用 简单直接；如果是展示用户输入、代码块或需要严格保留格式的内容，用CSS的white-space更灵活且易于维护。两者也可以组合使用，例如在pre环境中插入 来强化某些位置的间隔。
注意：在HTML标签属性或CSS中写空格时，不要误把标签名称写成元素，例如input()是函数调用，而<input>才是标签。
示例：用white-space处理代码显示
<pre style="white-space: pre;">
function test() {
return '保留空格';
}
</pre>
上述代码在页面上会完整保留函数体内的缩进与多个空格，且不会因宽度不够而折行，是解决HTML5空格保留与禁止换行问题的实用方案。
HTML5nbspwhite-space修改时间：2026-07-27 06:33:09