在网页里尤其是客服窗口气泡中，文字里的空格经常因为HTML默认规则被合并成一个，导致话术排版不好看。我们要先搞清楚HTML空格符号怎么打，才能对客服气泡做优化。
HTML里常见的空格符号怎么打
HTML中直接用键盘空格键输入的空白，在连续多个时只会保留一个，这叫空白折叠。常用的空格表示方式有以下几种：
- 普通空格：直接按空格键，但会被折叠
- 不换行空格：写成
，不会被折叠且不允许在此换行 - 窄空格：写成
 ，宽度较小 - 全角空格：直接输入中文全角空格，宽度为一个汉字
客服窗口气泡的空格问题
客服气泡一般用来展示用户和客服的对话。如果用户输入了多个空格做分隔，比如填了地址或订单号，直接用文本塞进气泡就会被压缩，看起来很挤。我们可以用不换行空格或者预格式来处理。
用文本替换优化空格
在把用户输入的内容塞进气泡前，可以把普通空格转成不换行空格，代码如下：
// 将用户输入的连续空格替换为HTML不换行空格
function formatBubbleText(raw) {
// 先把特殊字符转义，防止XSS
let escaped = raw.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
// 将一个或多个空格变成
return escaped.replace(/ /g, ' ');
}
let userInput = '订单号 12345 请尽快处理';
let safeText = formatBubbleText(userInput);
console.log(safeText);
用预格式标签保留原样空格
如果不想替换，也可以用<pre>标签包住气泡内容，但那样字体和换行要额外调。更简单的是用CSS的white-space属性：
.bubble {
white-space: pre-wrap; /* 保留空格和换行，但允许自动换行 */
word-break: break-word;
}
优化后的气泡结构示例
下面是一个简单的客服气泡HTML结构，应用了上面的思路：
<style>
.tip-bubble {
white-space: pre-wrap;
background: #f1f1f1;
padding: 8px 12px;
border-radius: 6px;
max-width: 240px;
}
</style>
<div class="tip-bubble">订单号 12345 请尽快处理</div>
小结
客服窗口气泡的空格优化核心就是别让浏览器把空格吃掉。用 替换或者CSS的white-space都能解决。实际项目里推荐用white-space: pre-wrap，既保留用户输入习惯，又不会撑破布局。