浏览器默认将连续空格合并为一个，导致JS输出多空格失效。本文介绍两种解决方案：一是使用HTML非断行空格实体 手动填充；二是通过CSS设置white-space:pre属性，使浏览器保留原始空白字符。
浏览器默认将连续空格合并为一个，导致JS输出多空格失效。本文介绍两种解决方案：一是使用HTML非断行空格实体 手动填充；二是通过CSS设置white-space:pre属性，使浏览器保留原始空白字符。
浏览器空格合并机制
在编写JavaScript代码时，开发者常遇到一种现象：
document.write(" 1 2 3 ");
结果: 1 2 3
无论输出字符串中包含多少个连续空格，页面渲染结果通常只显示一个空格。
这是由于浏览器的默认渲染机制所致，浏览器会将手动输入的连续多个空格合并显示为一个空格。
保留空格的解决方案
要解决此问题，可采用以下两种方法：
第一种方法是使用HTML实体 来替代普通空格。
document.write(" "+"1"+" "+"23");
结果: 1 23
第二种方法是通过CSS样式进行控制。
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
结果: 1 2 3
在输出内容时，添加“white-space:pre;”样式属性。该属性指示浏览器保留文本中的空白字符，包括空格和换行符。
以上介绍了在JavaScript中实现多空格输出的两种简单方法，供参考使用。