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

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

852发表于2018-04-26

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

方案一:采用js实现(不推荐)

方案二:采用css实现(推荐)

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

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


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

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



小编蓝狐