《flex 布局下怎样实现 text-overflow: ellipsis 效果?》在flex布局下怎么实现文字超出的话

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

 <div class='flex'>
         flex 布局下怎样实现 text-overflow: ellipsis 
 </div>

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

这样写内容长度超出了200px后，并未出现3个点...

如果把flex布局改为display:block 才能达到想要的效果

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

因为：

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: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
">flex 布局下怎样实现 text-overflow: ellipsis </div>
</div>