如图所示：外层放了一个scroll-view,做横向滑动展示所以设置了属性white-space:nowrap;然后设置子级view的文字为多行隐藏，开发者工具中展示正常，手机打开后出现排版混乱。检查代码发现可能是子级设置white-space:pri-line引起的，设置文本转行后设置overflow:hidden,在开发者工具能够正常隐藏，手机打开隐藏了文字但是实际占得位置还是保留了，请问这种情况应该怎么去处理

开发者工具展示:

手机真机调试：

   <scroll-view scroll-x="true" class="hot-icon">
    <view class="icon-box bg-ff">
      <image src="/image/hot_1.png"></image>
      <view class="f-26 c-base center txt">测试</view>
    </view>
    <view class="icon-box bg-ff" >
      <image src="/image/hot_1.png"></image>
      <view class="f-26 c-base center txt">测试测试</view>
    </view>
    <view class="icon-box bg-ff" >
      <image src="/image/hot_1.png"></image>
      <view class="f-26 c-base center txt">测试测试测试</view>
    </view>
    <view class="icon-box bg-ff" >
      <image src="/image/hot_1.png"></image>
      <view class="f-26 c-base center txt">测试测试测试测试</view>
    </view>
    <view class="icon-box bg-ff">
      <image src="/image/hot_1.png"></image>
      <view class="f-26 c-base center txt">测试测试测试测试测试</view>
    </view>
  </scroll-view>

.hot .hot-icon{width: 100%;height: 270rpx;white-space: nowrap;}

.hot .hot-icon .txt{
  width: 113rpx;
  margin: 0 auto;
  height: 74rpx;
  display: -webkit-box;
  word-break: break-all;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}

最后只能将display:-webkit-box;改成display:flex;修改之后多行字隐藏就不会出现省略号，但是排版不会乱了。

但是想要的效果还是实现不了，多行字隐藏的时候苹果手机会排版混乱，安卓手机不会

.hot .hot-icon .txt{
  width: 113rpx;
  margin: 0 auto;
  height: 74rpx;
  display: flex;
  word-break: break-all;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}