下文本溢出省略号失效

类似设计稿左侧需要进行自适应,大家会进行flex布局,左侧自适应宽度。
image.png

Flex 布局时常见问题 - 图2
啊哈哈哈吧
黑海哈维和花时间家具家电等接口你到家那几你

简单写出html结构和css样式。以上就是简单实现样式,但是在浏览器中并不用实现溢出文本变成省略号。因为右侧flex布局实现自适应。而我们都知道需要实现省略号需要四个属性
width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
缺一不可!但是右侧的自适应无法给到准确的width值。
因为我们需要对右侧容器进行设置width:0 即可实现省略号。完美解决此问题

如果还有其他解决方案,希望大家踊跃回答