HTML中空格被合并是规范行为,应使用CSS的white-space属性控制空白显示,而非依赖 等实体或空格字符。

HTML 里敲空格键没用,是因为浏览器会合并连续空白符
HTML 解析器默认把多个空格、换行、制表符都当成一个普通空格处理。你源码里写 hello,预览出来还是 hello world —— 这不是 bug,是规范行为(HTML spec 的「white space collapsing」规则)。
- 纯靠键盘空格键打出来的空格,在 HTML 文本中几乎“不可见”
-
是非断行空格(non-breaking space),它不会被合并,也不会换行,适合单个强制空格 - 连续多个
可以模拟多个空格,但语义上不推荐堆砌(比如) - 真正需要控制空白布局时,应该用 CSS,而不是硬塞字符
用 white-space CSS 属性保留源码空格格式
这是最干净的解法:让容器尊重源码里的换行和空格,而不是靠字符 hack。
hello world line2
常用值说明:
-
pre:完全保留空格和换行,表现像标签 -
pre-wrap:保留空格和换行,但允许自动换行(更实用) -
pre-line:合并空格,但保留换行(换行符生效,空格仍被压缩) -
normal(默认):所有空白符合并为单个空格,换行符忽略
和 / 的区别与误用场景
很多人以为 能当“缩进”或“对齐”用,结果发现宽度不一致、响应式下错位——因为这些实体是字体相关的,不是固定像素。
立即学习“前端免费学习笔记(深入)”;
-
:一个标准字符宽,但受当前字体、字号、font-weight 影响 -
:约等于两个宽(en 空格,≈0.5em) -
:约等于四个宽(em 空格,≈1em) - 它们都不能替代 CSS 的
padding、margin或text-indent - 在等宽字体环境(如代码块)里用
比较可控;其他场景尽量避免
表格/对齐需求别用空格凑,改用语义化结构
看到有人为了“对齐文字”在 HTML 里疯狂加 或 ,这会导致可访问性差、维护困难、缩放失真。
- 左对齐/右对齐/居中:用
text-align - 首行缩进:用
text-indent - 列对齐:用
或 CSS Grid / Flex 布局
- 代码或日志类文本:用
+white-space: pre-wrap空格问题的本质,是混淆了「内容排版」和「视觉呈现」。HTML 负责结构,CSS 负责表现——强行用字符模拟样式,迟早会在不同设备或字体下露出破绽。
- 代码或日志类文本:用










