解决flex布局下text-overflowellipsis失效的问题

昨晚在做 uni-app 项目的时候，发现了一个问题：想做一个文本超出宽度后尾部文字变成省略号的效果，但是却只隐藏了超出宽度的文字，不出现省略号。

相关的 css 代码如下所示：

view:nth-child(2) {
    font-size: 20rpx;
    align-items: center;
    width: 70vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;  
    
    image {
        width: 32rpx;
        height: 20rpx;
        margin-right: 10rpx;
        flex-shrink: 0; 
    }
}

后面排查了一下，发现是 display:flex; 使 text-overflow: ellipsis; 失效了，原因是在 flex 布局中，如果容器中的内容不足以填满容器时，布局会根据 justify-content 和 align-items 属性的设置来调整子项的位置。当子项被压缩到一定程度时，text-overflow: ellipsis 属性就会失效，因为省略号的展示依赖于元素的宽度。

解决办法：

可以考虑给容器添加一个额外的包裹层，在该层上设置 text-overflow:ellipsis 和 white-space:nowrap 属性。同时，将该包裹层设置为 flex:none，这样就能够保持该层的宽度不受 flex 布局的影响，从而实现省略号的效果；
如果布局不是特别复杂，可以去掉 flex 布局改用其他布局方案；
使用 min-width: 0 限制原始大小。

因为我这里的布局比较简单，后来发现不需要 flex 布局也可以实现，删除 display: flex 就能解决问题了：

参考原帖：(50条消息) flex布局中 text-overflow:ellipsis 失效flex下ellipsis失效呀呀夫斯基的博客-CSDN博客