使用css ellipsis超过宽度加上点点省略号没有生效的解决方案

好久没更新博客了。最近在写小程序，遇到一个使用css实现超过宽度加上点点省略号。一般前端截断文字有两种方案。

方案一：采用js实现（不推荐）

方案二：采用css实现（推荐）

.ellipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

一般情况使用上面代码都能起作用但是，今天遇到了没生效。

经过苦逼的排查问题，原来罪魁祸首是设置了文本的display属性为flex了。

解决办法：取消display属性的flex,完美生效。