前言
今天在做项目的时候,突然发现一个问题,浏览器输出的数据跟我原本的数据不一致,原本有多个空格,浏览器将多个空格压缩为一个。
<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样式
常见问题FAQ
- 【点击查看】免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 【点击查看】提示下载完但解压或打开不了?
- 【点击查看】开通终身至尊下载源码 “不完整” 或 “不能用” 怎么办?
- 【点击查看】开通终身会员能下载全站资源码?