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

dailer
  • 289

在 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个点...

clipboard.png

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

clipboard.png

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

回复
阅读 13.6k
7 个回答

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

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

加上

min-width: 0
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>

内部套一层标签

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

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

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

text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
你知道吗?

宣传栏