display: flex;’布局下使用‘white-space: nowrap;’导致的问题

需求：

在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图：

代码：

wxml布局:

<view class="member-item">
    <image "avatar" src=""></image>
    <view "info">
      <view "name">姓名</view>
      <view "signature">这个人很懒，什么都没写。这个人很懒，什么都没写。</view>
    </view>
  </view>

wxss样式：

.member-item {
  margin-top: 1px;
  padding: 15rpx 30rpx;
  display: flex;
  flex-direction: row;
  background-color: white;
  width: auto;
}
 
.avatar {
  background-color: whitesmoke;
  width: 96rpx;
  height: border-radius: 50%;
}
.info {
  flex-direction: column;
  margin-left: flex: 1;
}
.name {
  font-size: color: #333;
  line-height: 48rpx;
}
.signature {
  28rpx;
  #888;
  48rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果：

问题：

为了自适应屏幕大小，这里父布局采用flex，展示个性签名的view对应的class为signature，其中我通过“overflow: hidden; text-overflow: ellipsis; white-space: nowrap;”来实现单行显示，超出实际能显示的最大宽度则用‘...’代替的效果。但是在实际效果如上图所示，当内容超出实际可显示宽度时，挤压推出左侧布局以显示signature中的内容，导致左侧布局的变形甚至被挤出。

解决办法：

在signature的父布局info中添加样式?min-width: 0;?即可解决。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!