html中空格会被浏览器压缩为一个且首尾忽略，非bug而是规范；需用 实现不可折行空格，white-space:pre-wrap等css属性控制多空格显示，js则用正则清洗字符串空格。
HTML 中的空格不会像代码编辑器里那样“原样保留”——浏览器会把连续多个空白字符（空格、换行、制表符）压缩成一个空格，且首尾空格直接忽略。这不是 bug，是规范行为。想精准控制空格，得用对方法，而不是硬塞 或改 CSS。
为什么 不该乱用
是 HTML 实体，代表“不换行空格”，它确实能强制显示一个空格，但问题在于：它不可见、难维护、语义错位。比如在按钮文字中写 <button>确定 提交</button>，三个 看不出间距意图，也容易误删或复制出多余实体。更麻烦的是，它无法响应式缩放，也不适配屏幕阅读器的自然断词逻辑。
- 只在真正需要“此处必须有一个不可折行的空格”的场景用，比如单位和数字之间：
100 px - 避免用于排版对齐或“视觉留白”目的
- 不要用它替代 CSS 的
margin或padding
white-space 是最直接的 CSS 控制开关
当你要让一段文本原样显示空格、换行和缩进（比如代码块、日志输出、诗歌排版），white-space 是唯一靠谱的方案。它的几个常用值差异明显：
-
white-space: pre;—— 完全保留空格和换行，但不自动换行（文本超宽会溢出） -
white-space: pre-wrap;—— 保留空格和换行，同时允许自动换行（日常最常用） -
white-space: pre-line;—— 合并连续空格，但保留换行符（适合带段落结构的纯文本）
示例：<pre class="brush:php;toolbar:false;"> hello world</pre> 默认就带 white-space: pre;；换成 <div style="white-space: pre-wrap;"> hello world</div>，效果一样但更可控。
JavaScript 处理字符串空格要分清场景
前端常遇到用户输入带多余空格的文本（如搜索关键词、表单字段），这时候不能靠 HTML 或 CSS 解决，得用 JS 清洗。注意别一上来就 .trim() ——它只去首尾，中间多个空格照旧。
- 只去首尾空格：
str.trim() - 去首尾 + 合并中间多个空格为一个：
str.replace(/\s+/g, ' ').trim() - 彻底去掉所有空白字符（含换行、制表）：
str.replace(/\s/g, '')
特别提醒：如果后端接口要求“空格敏感”（比如密码校验、命令行参数），清洗前务必确认业务规则，否则 .trim() 可能直接导致认证失败。
空格处理真正的复杂点不在技术手段，而在于判断“这里到底需不需要空格”。是语义分隔？视觉节奏？还是数据一致性？选 、CSS 还是 JS，本质是选“谁来负责这段空格的含义”——HTML 负责结构，CSS 负责呈现，JS 负责逻辑。混着用，很快就会变成谁都说不清那一串空格到底是干啥的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
