See You Tomorrow

jiojun的个人小博客

关于 display: flex; 布局下使用 white-space: nowrap; 无效的问题

想实现这样的效果,中间title 在超出时隐藏掉。

QQ截图20181211151408

可最后右边的内容却被顶出去了,如下图

QQ图片20181211145459

代码如下:

 

.area-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  img {
    width: 30px;
    height: 30px;
  }
  .title-wapper {
    flex: 1;
    .title {
      width: 100%;
      overflow: hidden;
      height: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .type {
    color: #aaa;
  }
}

 

解决办法:

在.title-wapper中添加  min-width: 0; 样式即可。

上一遍:没有了
来都来了,你不打算说点什么吗?
最新留言
暂无留言信息!