JavaScript中保留多个连续空格的两种方法

浏览器空格合并机制

在编写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中实现多空格输出的两种简单方法，供参考使用。