html按钮中连续空格被合并是规范行为，可用 实体或white-space:pre-wrap等css属性解决，避免使用 、 等排版空格。
HTML按钮里空格被合并怎么办
浏览器默认会把连续多个空格、换行、制表符压缩成一个空格，所以直接写 <button>姓名： 张三</button>，显示出来只有“姓名： 张三”（一个空格）。这不是 bug，是 HTML 的空白符处理规范。
用 替代普通空格
最简单可靠的方法是用不间断空格字符 。它不会被浏览器合并，也不会换行，适合对齐或留固定间距。
比如想让冒号后空 4 格再显示名字：
<button>姓名： 张三</button>
注意： 是 HTML 实体，必须写成 （& 要转义），否则可能被当成文本字面量显示为 “ ”。
用 CSS 的 white-space 控制空白行为
如果按钮文字动态生成，或空格数量不固定，硬塞 维护成本高。这时可以改用 CSS：
-
white-space: pre：保留所有空白符和换行，但不自动换行 -
white-space: pre-wrap：保留空白符，且允许换行（更常用） -
white-space: pre-line：合并连续空格，但保留换行
示例：
<button style="white-space: pre-wrap;">姓名： 张三</button>
这样写 HTML 里的 4 个空格就会原样显示。但要注意：这个样式会影响整个按钮内容的换行逻辑，如果按钮宽度窄，pre 可能导致文字溢出，pre-wrap 更安全。
为什么不用 或
这两个是排版用的“空格单位”， 约等于半个汉字宽， 约等于一个汉字宽。问题在于：
- 它们不是“空白符”，而是独立字符，语义上不属于空格，部分旧浏览器渲染不一致
- 在等宽字体下表现稳定，但在非等宽字体（如默认 sans-serif）中宽度可能浮动
- 可读性差：别人维护代码时看到
除非明确需要“汉字级对齐”，否则优先选 或 white-space。
真正麻烦的是混合场景：比如按钮文字含变量，又要保留某几处空格——这时候得在 JS 拼接时提前把空格转成 ，或者统一用 CSS 控制，别指望 HTML 解析器替你猜哪几个空格该留、哪几个该压。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
