HTML中连续空格被折叠为一个,是规范规定的默认行为,非bug;应优先用 实体或CSS的white-space属性控制,避免滥用全角空格或冗余实体。

直接在 <p> 或 <span> 里敲空格为什么只显示一个?
因为 HTML 规范规定:所有连续空白字符(空格、制表符、换行)都会被浏览器“折叠”成单个空格。这不是 bug,是默认行为。你在源码里写 hello world,渲染出来就是 hello world。
常见错误现象:
– 在按钮文字里连打 5 个空格想对齐,结果没用
– 把 当 CSS margin 用,导致响应式下错位
– 混用 和 ,字体切换后间距突变
- 纯文本微调(如“姓名:
张三”),优先用—— 它最稳定,IE8+ 全支持 - 不要用全角空格(中文输入法下的空格)代替
:编码不一致时可能乱码,且不可选中/复制 - 如果空格只是为视觉留白,别往 HTML 里塞实体,改用
padding-left或margin-right
、 、 三个空格实体怎么选?
它们不是“谁更好”,而是“谁更准”——宽度和语义不同:
-
:宽度 ≈ 1 个英文字符,带“不换行”属性,适合防断行(如“¥ 99.00”)或单词间微调 -
:宽度 ≈ 0.5em(约半个汉字),常用于排版对齐,比如表格内文字右对齐时补间隙 -
:宽度 ≈ 1em(约一个汉字),适合中文首行缩进或模拟 tab,但老浏览器(IE8 及更早)不支持
注意: 和 在等宽字体 vs. 比例字体下表现差异明显;若需跨设备一致,宁可用 text-indent: 2em 替代 做缩进。
立即学习“前端免费学习笔记(深入)”;
版权符号 ©、注册商标 ® 这类特殊字符怎么安全插入?
直接粘贴或用键盘输入容易出问题:编码不匹配时显示为方块,或被编辑器自动转义。必须用 HTML 实体。
- 优先用命名实体:
©、®、™—— 可读性强,兼容性最好 - 数字实体也可用,但别混写:
©(十进制)和©(十六进制)都对,但©(漏掉分号)会失效 - 避免把特殊字符当“装饰”硬塞进文本:比如
© 2026应该是语义化内容,不是视觉点缀;若只是图标需求,用 SVG 或 icon font 更可控
想保留原文所有空格和换行(比如代码、日志、诗歌),该用哪个方案?
<pre> 最直接,但副作用明显:它强制等宽字体、禁用自动换行、影响行高。更稳妥的是 CSS 控制:
- 对小段文本(如带缩进的提示语),加 class 后设
white-space: pre-wrap—— 保留空格和换行,又允许长行折行 - 对代码块,用
<pre><code>组合,并配tab-size: 4控制缩进宽度 - 千万别在
<pre>里再嵌:语义重复,且可能被双重解析
复杂点在于:textarea 用户输入的空格天然保留,但一旦用 JS 赋值给 innerHTML,就会被折叠。此时应优先用 textContent + white-space: pre-wrap,而不是靠堆 补救。



















