直播平台源码，解决uni-app中flex布局子元素宽度溢出

直播平台源码，解决uni-app中flex布局子元素宽度溢出

页面布局如下

<view class="friend-list">
<view class="avatar"></view>
<view class="wrapper-right">
<view class="wrapper-right-inner">
<view class="text">
                <view class="name"></view>
<view class="time"></view>
            </view>
<view class="message"></view>
</view>
</view>

​

样式： 

.friend-list{
width: 100%;
height:128rpx;
display: flex;
}
.avatar{
width: 84rpx;
height: 84rpx;
}
.wrapper-right{
flex:1;
border-bottom: 1px solid #EDEBF2;
}
.wrapper-right-inner{
    display: flex;
height: 128rpx;
width: 100%;
    ......
}
.name{
max-width:500rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
    ......
}
.time{
width: 186rpx;
text-align: right;
    .....
}

 具体原因是name多行文本溢出设置了white-space: nowrap导致溢出文本无法换行，而flex:1可以使子元素自适应父元素剩余宽度，但不能让自己的子元素的宽度自适应。

以上就是直播平台源码，解决uni-app中flex布局子元素宽度溢出， 更多内容欢迎关注之后的文章