<scroll-view class="table scroll-wrap"  scroll-x="{{true}}">
      <view class="grid-table">
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i">我我我我哦喔喔我我哦嗖嗖嗖嗖搜哦嗖嗖嗖嗖搜哦搜搜噢搜索</view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
  /view>
</scroll-view>

其中的文字无法换行，怎么处理？

.grid-table{
  display: grid;
  grid-template-columns: repeat(7,150px);
  grid-template-rows: 24px repeat(12,50px);
  gap: 1px;
}
.table{
  /* display: inline-block; */
  display:inline-flex;
  flex-direction: column;
}
.scroll-wrap{
  width: 100%;
  white-space: nowrap;
}