您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5

flex环境下文本溢出显示省略号的实现

发布时间：2020-06-15 22:09:39编辑：雪饮阅读（）

一般的我们实现css的文本溢出显示省略号做法如下

text-overflow:ellipsis文本溢出显示省略号：

 

div{

  text-overflow:ellipsis;

  overflow:hidden;

  white-space: nowrap;

 }

当感受到flex布局的魅力后基本上大多数前端布局都用上了flex

但在flex布局中再次使用上面的方法实现文本溢出显示省略号时就发现无论如何不能生效。

在flex布局下我们一般不希望给某个容器固定宽高，比如一个最常见的需求就是父容器中有多个子容器，而当最后一个容器的宽想要用到父亲容器剩下的宽时候我们一般都是用flex:1的形式，这个时候若还要实现最后一个容器溢出显示省略号，则父亲容器也需要overflow:hidden，这算是一个比较蹩脚的解决方案，至少目前是这样的，期待有更好的方法吧。