最新公告
  • 欢迎加入中国站长资源网团队,精品资源持续增加!立即加入我们
  • 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样式

    如果遇到资源下载失效,请复制当前文章链接类型客服处理!
    中国站长资源网 » CSS将多个空格变成为一个空格

    常见问题FAQ

    【点击查看】免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    【点击查看】提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    【点击查看】开通终身至尊下载源码 “不完整” 或 “不能用” 怎么办?
    非常抱歉,你有权利告诉本站,但是本站有选择处理或者不处理的权力,如无法接受请不要开通本站会员。
    【点击查看】开通终身会员能下载全站资源码?
    可以100%下载全站源码资源的,除部分失效资源,失效的可以联系客服尝试恢复。