HTML中显示“看得见”的空格需用 实体( ),或使用标签保留空白符,或通过CSS white-space属性(如pre-wrap)精细控制。
普通键盘敲空格,HTML 默认会把连续多个空格合并成一个,还可能被换行截断。真要显示一个固定宽度的空格,得用 (non-breaking space)——它不会被浏览器折叠,也不会在行尾被自动换掉。
是 HTML 实体,必须写成 才能在源码里安全出现(比如在 JSX 或模板字符串中) 宽度 ≈ 当前字体下一个英文字符宽度,不是固定像素值如果一段文字里有大量缩进、多级空格或想严格按空格排版, 写起来太累,也难维护。这时候该上 标签。
会让里面所有空白符(空格、制表符、换行)原样保留并按等宽字体渲染monospace),但可通过 CSS 改:pre { font-family: "SF Mono", Consolas, monospace; }
会强制换行,且不响应 text-align;若需居中,得包一层
CSS 的 white-space 属性比 更灵活
不想整个块都变等宽?或者需要在行内保留空格又不破坏布局?white-space 是更细粒度的控制方式。
-
white-space: pre —— 换行和空格都保留,但不自动换行(溢出容器)
-
white-space: pre-wrap —— 推荐日常用:空格和换行保留,同时允许长单词/长空格串在边界处折行
-
white-space: pre-line —— 合并多余空格,但保留换行符(适合从后端返回带 \n 的文本)
- 注意:这些值对 inline 元素(如
)生效有限,建议用在 或 上
JavaScript 动态插入空格时容易踩的坑
用 JS 拼接字符串或设置 textContent/innerHTML 时,空格行为很容易误判。

用 textContent = "a b" → 浏览器仍会压缩成 "a b";得改用 innerHTML = "a b"
- 用
String.prototype.repeat() 生成空格?别直接 repeat " ",改用 " ".repeat(4)
- 正则替换文本中的空格为
时,小心匹配到 自身:用 str.replace(/(^|[^&]) /g, "$1 ") 不够健壮,推荐先转义再处理
最麻烦的其实是混合场景:既要保留用户粘贴进来的缩进,又要支持富文本编辑、还要适配移动端折行。这时候光靠空格实体或 不够,得结合 white-space: pre-wrap + overflow-wrap: break-word + 字体一致性控制。空格看着小,一动就是连环反应。