小程序scroll-view横向滑动列表文字不换行

小程序scroll-view横向滑动列表文字不换行

今天在写小程序的时候需要一个横向滑动列表scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下：

<scroll-view enable-back-to-top="true" scroll-x="true" class="scroll">
  <view wx:for="{{ files}}" wx:key="index" class="filesList">
     <text>{{item.name}}</text>
   </view>
</scroll-view>

.scroll {
   width: 100%;
  height: 200rpx;
  white-space: nowrap;
  display: flex;
}

.filesList {
  overflow: hidden;
  width: 300rpx;
  height: 178rpx;
  background: #f7f7f7;
  border-radius: 8rpx;
  display: inline-block;
  margin: 0 20rpx;
}

.filesList text {
  white-space: normal !important;
}

解决的方法

在文字的父级加上 overflow: hidden;
文字本身加一个white-space: normal !important;
测试可用