flex 布局下怎样实现 text-overflow: ellipsis 效果?

Question

在 flex 布局下怎么实现文字超出的话显示3个点呢

 <div class='flex'>
         上课放假啊上官红给送杜防守反击快乐十分就够我 i 哦
 </div>

 .flex{
    display:flex;
    border: 1px solid red;
    width:300px;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

效果如下图,并未出现3个点...

如果改为display:block 那么就会达到想要的效果

在 flex 布局下怎么才能达到这种效果呢?

Answer 1

// 给flex item设置最小宽度
min-width: 0

原理
如果容器的宽度小于flex item本身的宽度，flex item会拒绝收缩，除非你给flex item 的min-width、max-width或width指定一个值

Answer 2

加上

min-width: 0

Answer 3

text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;

只对有设置宽度的块级元素有效，所以使用flex后不会显示...。

可以在内部再套一个div

<div class="flex" style="
    display: flex;
    border: 1px solid red;
 ">
<div style="
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
">上课放假啊上官红给送杜防守反击快乐十分就够我 dededede 哦</div>
</div>

Answer 4

内部套一层标签

Answer 5

webkit有可以用css单标签实现，但是不是webkit不行

-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Answer 6

min-width:0;这一句很优秀，试了一下楼上说了 对于flex:1;的元素 生效了，非常棒

Answer 7

text-overflow:ellipsis; white-space:nowrap; overflow:hidden;