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

caspar 发布于2019-08-30 10:51 / 1103人阅读

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。

需求：

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

代码： wxml布局:

  
    
    
      姓名
      这个人很懒，什么都没写。这个人很懒，什么都没写。

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: 96rpx;
  border-radius: 50%;
}
.info {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  flex: 1;
}
.name {
  font-size: 30rpx;
  color: #333;
  line-height: 48rpx;
}
.signature {
  font-size: 28rpx;
  color: #888;
  line-height: 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;即可解决。

云服务器 GPU云服务器 flex布局布局遇到的问题 flex在linux下安装布局问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114608.html

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

摘要：需求在中实现布局预期效果为左侧一个正圆形的用户头像，右侧的上方为该用户昵称下方为个性签名单行显示，超出实际能显示的最大宽度则用代替。解决办法在的父布局中添加样式即可解决。需求：在item中实现布局预期效果为：左侧一个正圆形的用户头像，右侧的上方为该用户昵称、下方为个性签名（单行显示，超出实际能显示的最大宽度则用‘...’代替）。如图： showImg(https://segment...

waruqi 2019-08-02 16:17 评论0 收藏0
flex布局遇到white-space:nowrap怎么超出一行显示省略号

摘要：后两个属性可选，该属性有两个快捷值和。属性定义了项目的缩小压缩比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。当我们设置，项目控件由于不能计算多余的空间导致无法收缩了。写在最前：当flex遇到white-space:nowrap，你知道怎么破局吗？切图带你分析原理，三个方案任意选择！一、场景： showImg(https://segm...

tylin 2019-08-30 15:44 评论0 收藏0
土旦：关于display:flex碰上white-space nowrap 影响布局的问题

背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响解决办法，父div设置min-width:0即可 flex: 1; min-width: 0; w3c上面是这样说的 By default, flex items won’...

lbool 2019-04-23 11:44 评论0 收藏0
自适应宽度元素单行文本省略用法探究

摘要：单行文本省略和元素及其父元素的属性都无关元素或为元素内单行文本省略，需要给元素或为元素添加样式为元素的子元素如果是自适应宽度时，内的子元素实现单行文本省略，需要给添加样式单行文本省略是现代网页设计中非常常用的技术，几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景，如列表标题、文章摘要等。在响应式开发中，自适应宽度元素单行文本省略容易失效不起作用，对网页开发这造成困扰。因此，本文将要...

K_B_Z 2019-04-23 13:46 评论0 收藏0