flex布局遇到white-space失效问题

最新推荐文章于 2024-08-24 14:29:22 发布

Mortimery

最新推荐文章于 2024-08-24 14:29:22 发布

阅读量4.9k

点赞数

分类专栏： CSS / CSS3 文章标签： flex white-space

本文链接：https://blog.csdn.net/qq_35145061/article/details/80972956

版权

CSS / CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

昨天在用vue做移动端单页面时，遇到一个问题，给子标签加上flex等于1，尝试多次无效，发现把white-space属性去掉，就能正常实现等宽自适应布局。

初步定位问题为，white-space对flex弹性布局有影响。在网上找了一系列的资料，找到一个解决办法，给使用了white-space的子标签添加一个属性min-width: 0，可以解决问题。

HTML--伪代码
<div class="controls">
     <div class="play-btn" :class="audio.play ? 'play' : 'pause'" @click.stop="set_playBtn(!audio.play)"></div>
     <div class="song-des"> 
        <p class="song-name">{{audio.data.name}}</p>
        <p>
          <a><em>{{audio.data.user.name}}</em></a> 发布在
          <a><em>{{audio.data.channel.name}}</em></a> 频道
        </p>
     </div>
     <div class="barrage" :class="barrage ? 'off' : 'on'" @click.stop="barrage = !barrage"></div>
</div>

css(stylus)--伪代码
.controls
        width 100%
        height 1.6rem
        line-height 1.6rem
        background-color rgba(0,0,0,.3)
        position absolute
        bottom 0
        left 0
        display flex
        .play-btn
            width 1rem
            height 1rem
            margin .3rem
            background-size cover
        .song-des
            flex 1
            min-width 0
            font-size 14px
            vertical-align: top;
            p
                text-align left
                color #fff
                line-height 20px
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                font-size 11px
                em
                    color #6ed56c
        .barrage
            width 1.67rem
            height .67rem
            margin .5rem .3rem
            background-size cover
            border-radius 1.67rem