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

开发者工具展示:

手机真机调试：

<scroll-view scroll-x="true" class="flex hot-icon">
    <view class="icon-box bg-ff" data-id="{{item.id}}" bindtap="goDetails" wx:for="{{hotlistData}}">
      <image src="{{item.img}}"></image>
      <view class="f-26 c-base center txt">{{item.title}}</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;
}