html中输入真正空格应使用 （不间断空格）或css属性如white-space: pre-wrap、padding、text-indent；避免多 拼接，警惕零宽字符干扰。
HTML 里怎么输入真正的空格（不是被浏览器合并的）
浏览器默认会把连续多个 、普通空格、制表符、换行都压缩成一个空格。客服窗口气泡里想对齐文字、留出固定空白，直接敲空格键没用。
- 用
- 用
- 避免用多个
padding或text-indent
客服气泡里空格错乱的常见表现
用户看到气泡文字挤在一起、冒号后没空格、多级缩进失效，通常不是空格没打，而是被 HTML 解析规则吃掉了。
- 源码写的是
您好： 请稍候（冒号后两个空格），但渲染出来是您好：请稍候 - 用
title=您好 在线→ HTML 解析失败，空格被截断 - 富文本编辑器粘贴内容时自动把空格转成
，导致复制后看不见却占位
CSS 替代方案比硬塞空格更可靠
气泡 UI 需要一致的呼吸感和可维护性，纯靠字符空格容易在不同字体、字号、设备上偏移。
- 用
padding-left控制头像与消息正文距离，比如padding-left: 8px - 用
text-indent实现首行缩进（如客服提示语），比开头堆 - 用
white-space: pre-wrap保留原文换行和空格，适用于展示带格式的客服话术模板
<div class="bubble" style="white-space: pre-wrap;"> 您好， 您的订单已受理。 请留意短信通知。 </div>
容易被忽略的细节
零宽空格 、字节顺序标记 这类不可见字符，常从 Word 或微信粘贴进 HTML 编辑器，会导致气泡宽度异常、光标定位错乱、甚至触发 XSS 过滤误判。上线前用浏览器开发者工具的「元素」面板右键「Edit as HTML」，手动删掉可疑的 开头实体更稳妥。
立即学习“前端免费学习笔记（深入）”；
