欢迎光临精准像素,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

css教程

CSS将多个空格变成为一个空格

css教程 精准像素 2021-10-22 共10人阅读

前言

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

<div id="app">
<div>{{a}}</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
a: "我是七个鱼啊     我是七个鱼"
},
created() {
console.log(this.a)
}
})
</script>

white-space:normal;在CSS中表示,合并空白字符,允许自动换行。
同样的white-space还有其他几个属性:
nowrap:表示合并空白字符,不允许换行
pre-line:合并空白字符(不包括换行符),允许自动换行
pre:不合并空白字符,不允许自动换行
pre-wrap:不合并空白字符,允许自动换行

解决方法

1. 使用CSS属性white-space:pre;,这个方法可能破坏原有的样式,不建议使用
2. 使用语义化标签<pre></pre>,这种方法会将输入的字符原样展示,目前没有见到破坏CSS样式