(HTML)浏览器将多个空格压缩为一个空格

前言

今天在做项目的时候，突然发现一个问题，浏览器输出的数据跟我原本的数据不一致，原本有多个空格，浏览器将多个空格压缩为一个。

代码示例

浏览器输出

 

 控制台打印

 我们明显可以看到，浏览器将多个空格合并为一个空格了。

这是因为我们在编写HTML的时候，会有一个默认属性:white-space:normal;

white-space:normal;在CSS中表示，合并空白字符，允许自动换行。

同样的white-space还有其他几个属性：

nowrap:表示合并空白字符，不允许换行

pre-line:合并空白字符(不包括换行符),允许自动换行

pre:不合并空白字符，不允许自动换行

pre-wrap:不合并空白字符，允许自动换行

解决方法

1. 使用CSS属性white-space:pre;

这个方法可能破坏原有的样式，不建议使用

2. 使用语义化标签<pre></pre>

这种方法会将输入的字符原样展示，目前没有见到破坏CSS样式

代码示例