display与overflow同时使用时，overflow会失效如何解决

前两天在写业务的时候发现，如果使用了display，overflow的部分功能就会失效。

想要效果：

 

 但是使用了display和overflow后。。。

代码：

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

效果：

 

 刚开始不理解，后来发现两个一起使用会失效（因为旁边没有使用display的效果没有问题）。

解决方法一：

当时选择的就是嵌套一个span解决问题。

<div>//使用display
   <span>//使用overflow
     //值
   </span>
</div>

 

解决方法二：

网上搜索还有一种方法是加一个：

    width: 0;

但是在使用过后是没有效果的， 直接空了。

 

这种方法也许是有用的，但是可能是在特定的场合。