浏览器默认合并连续空白字符,仅显示一个空格; 是不换行空格,不会被合并或折行, 等效于普通空格仍会被合并;强制保留且不断行用 ,语义化空格应避免硬编码,优先使用css(如padding、text-indent、letter-spacing)或white-space: pre-wrap控制。

HTML里敲空格为啥不显示
浏览器默认会把连续的空白字符(空格、换行、制表符)合并成一个空格,再把首尾空白全忽略。所以直接敲十个 或写十个空格,页面上只看到一个。
和 的区别在哪
是不换行空格(non-breaking space),它不会被浏览器合并,也不会在行尾被折断; 只是空格字符的十进制数字实体,行为和普通空格完全一样,照样会被合并。
- 要“强制保留且不断行”,用
- 要“语义化表示一个空格字符”(比如在
pre外模拟等宽排版),没实际意义,不如直接敲空格 - 批量空格建议用
,但别堆二十个——可读性差,也影响语义
CSS替代方案更可控
靠实体硬塞空格是权宜之计,真正需要对齐、缩进、间距,应该用CSS。比如:
span.indent { padding-left: 2em; }
div.spaced { letter-spacing: 0.1em; }
这样既避免HTML里塞一堆 ,又方便统一调整、响应式适配、无障碍阅读支持。
立即学习“前端免费学习笔记(深入)”;
-
margin/padding管元素间/内距离 -
text-indent专用于首行缩进 -
letter-spacing微调字间距,但别设负值过大,影响可读性
pre和white-space: pre-wrap能保留所有空格
如果真要原样输出带空格的文本(比如代码片段、诗歌排版),用<pre class="brush:php;toolbar:false;"></code>标签最省事;或者给普通标签加<code>white-space: pre-wrap</code>样式:</p>
<pre class="brush:php;toolbar:false;"><p style="white-space: pre-wrap"> 这里有两个空格开头
下一行也有缩进</p></pre>
<p>注意:<code>pre会禁用自动换行,pre-wrap则允许换行,更适合正文内嵌。
-
pre自带上下边距和等宽字体,可能破坏原有样式 -
white-space: pre-line会合并空格但保留换行,适合日志类文本 - 服务端渲染时,别忘了对用户输入的
<pre class="brush:php;toolbar:false;"></pre>内容做HTML转义,否则XSS风险
、CSS、white-space时容易互相覆盖,调试起来反而比逻辑错误更难定位。最稳妥的做法:语义该用CSS的就别碰实体,必须用实体时,优先 ,别贪多。










