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

泪鱼无梦

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

代码示例

[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样式

Su、

浏览器的空格是&nbsp;，你手动输入的  输1W个也是一个空格

冰镇苏打水

这个应该是我最初接触前端就了解的。。。不能手动打多个空格~， css属性可以修改，倒是没了解过。

泪鱼无梦

Su、 发表于 2021-8-7 17:03
浏览器的空格是&nbsp;，你手动输入的  输1W个也是一个空格

这个主要是对input里面输入空白的情况

a681861

谢谢分享，学习了

exlc379

在网页端一些符号都是要用相对应的转义字符的，空格是&nbsp;其他比较常见还有 "：&quot; &：&amp;<：       
&lt;>：&gt;