HTML默认合并连续空格是规范行为而非bug,因浏览器将多个空格、换行、制表符压缩为一个;可用实现不换行空格,但精确缩进推荐语义化CSS方案text-indent,兼顾兼容性与可维护性。

HTML默认忽略连续空格的原因
浏览器渲染HTML时会把多个连续空格、换行、制表符全部压缩成一个普通空格,这是HTML规范行为,不是bug。所以直接写 文字或 文字,段首看起来还是只缩进一个空格。
用 手动补全空格最直接
非断空格 不会被合并,适合控制精确缩进量:
- 缩进2个中文字符宽:开头放
(2个) - 缩进首行4字符:用
(4个) - 注意:
是行内元素,不能跨块级元素生效,只对当前文本节点起作用 - 缺点:数量难估算,中英文混排时视觉宽度不一致
CSS的text-indent更适合段首缩进
这是语义正确、维护性高的方案,尤其适合正文排版:
- 给
p加样式:text-indent: 2em;—— 缩进当前字体大小的2倍,通常≈2个中文字符 - 支持负值(如
text-indent: -1em;)实现悬挂缩进 - 注意:
text-indent只影响第一行,后续行不受影响;它不适用于div等非文本流容器,除非设了display: block;且含文本 - 兼容性极好,所有浏览器都支持
避免用<pre>或white-space: pre做段首缩进
虽然能保留空格,但副作用太强,容易破坏布局:
立即学习“前端免费学习笔记(深入)”;
-
<pre>会禁用自动换行、改变字体、强制等宽,不适合普通段落 -
white-space: pre;会让整段文字不折行,超容器宽度直接溢出 - 如果只是想缩进首行,用它们属于“杀鸡用牛刀”,还可能影响可访问性和SEO
text-indent是首选;只有在动态生成内容、无法加CSS、或需像素级微调时,才考虑组合 。别小看那两个空格——缩进逻辑一旦混用 和CSS,后期调整时很容易漏改某一处。



















