(HTML)浏览器将多个空格压缩为一个空格
前言今天在做项目的时候，突然发现一个问题，浏览器输出的数据跟我原本的数据不一致，原本有多个空格，浏览器将多个空格压缩为一个。
代码示例
<div id="app">
<div>{{a}}</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
a: "我是七个鱼啊 我是七个鱼"
},
created() {
console.log(this.a)
}
})
</script>
浏览器输出
控制台打印
我们明显可以看到，浏览器将多个空格合并为一个空格了。
这是因为我们在编写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样式
浏览器的空格是 ，你手动输入的输1W个也是一个空格 这个应该是我最初接触前端就了解的。。。不能手动打多个空格~， css属性可以修改，倒是没了解过。 Su、 发表于 2021-8-7 17:03
浏览器的空格是 ，你手动输入的输1W个也是一个空格
这个主要是对input里面输入空白的情况 谢谢分享，学习了 在网页端一些符号都是要用相对应的转义字符的，空格是 其他比较常见还有 "：" &：&<：
<>：>
页:
[1]