木灵鱼儿

木灵鱼儿

阅读:828

最后更新:2020/06/16/ 14:12:55

flex自适应宽度由后text-overflow:ellipsis;失效 文本溢出失效

当我们给元素做了flex后,flex内的子元素宽度自适应,但是当我们给子元素设置文本溢出的时候,发现时候无效的,原因是因为他们的宽度没有限制,也就是说原始的宽度无限制,那么这个原始宽度又怎么说呢?

他有一个优先级:

优先级:flex-basis > width > 内容宽度。

我们可以通过设置max-width或者min-width来限制他的宽度,但是并不是很合适,因为这两个只是一个区间,而我们的设备宽度是不固定的,所以设置一个固定的区间并没有用,我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。

我们给这个flex子元素设置width:0;即可,设置一个极小的宽度。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 828

相关文章

目录树