收藏
回答

scroll-view设置white-space: nowrap; 子级view多行文字排版混乱?

如图所示:外层放了一个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%;height270rpx;white-space: nowrap;}

.hot .hot-icon .txt{
  width113rpx;
  margin0 auto;
  height74rpx;
  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{
  width113rpx;
  margin0 auto;
  height74rpx;
  display: flex;
  word-break: break-all;
  white-space: pre-line;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
最后一次编辑于  2020-09-28
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签