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

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

页面布局如下

 

1

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

​

样式： 

 

1

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

 

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

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