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

前言

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

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

上一篇：CSS3修改浏览器滚动条样式 下一篇：css3海浪波浪动态效果代码 栏目分类

帝国CMS教程

织梦cms教程

discuz教程

ecshop教程

phpcms教程

wordpress教程

苹果cms教程

php教程

数据库教程

微信小程序教程

python教程

css教程

js教程

视频教程

电子书

热门推荐

• 01 IE不显示加载iconfont阿里巴巴图标的解决方法 377热度
• 02 CSS文字超出省略号显示 318热度
• 03 分享IE6 PNG 透明的几种方法 244热度
• 04 为什么bootstrap国内很少人使用 239热度
• 05 CSS定位控制上下左右坐标教程 209热度