HTML中空格会被浏览器自动合并,需用 、 、 实体或white-space CSS属性控制空白效果,关键在于根据语义和场景选择合适方案。
HTML 里直接敲空格键,浏览器会自动合并成一个空格——这不是“打不出来”,而是 HTML 的默认渲染行为。想保留多个空格、缩进或特殊空白效果,必须用 HTML 实体或 CSS 控制。
打不可折叠的普通空格这是最常用也最容易踩坑的方式。 是 non-breaking space(不换行空格),浏览器不会把它和其他空格合并,也不会在行尾自动断开。
会生成多个独立空格,但可读性差,维护困难&nsbp; 或  (缺分号)——后者会被浏览器忽略或报解析错误姓名:张
三
和 控制更宽的空白它们是语义更明确的空格实体,宽度由字体决定,但比 更“有单位感”:
≈ 半个中文字符宽(en width),常用于英文排版中的词间微调 ≈ 一个中文字符宽(em width),适合模拟中文对齐、缩进一格第一章
引言
white-space CSS 属性批量控制空格行为当需要整块文本保留原始缩进和换行(比如代码片段、诗歌、日志输出),靠堆 不现实,该上 CSS:
white-space: pre —— 完全保留空格和换行,但不自动换行(超出容器也不折)white-space: pre-wrap —— 保留空格和换行,同时允许长单词/文本自动折行(最常用)white-space: pre-line —— 合并连续空格,但保留换行符(适合纯文本转 HTML)这里有两个空格开头 这里是四个空格 + 换行编辑器里快速输入空格实体的技巧
手动敲
太慢,不同编辑器有对应捷径:
& 后触发 Emmet 补全,选 ;或设置用户代码片段,绑定快捷键如 spc →
& + Tab 补全常见实体& 后自动提示真正难的不是“怎么打出空格”,而是判断该用实体还是 CSS、该保留还是压缩空白——多数布局问题,其实出在没想清楚这里。