flex下省略号的问题怎么解决

这篇文章主要介绍了flex下省略号的问题怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇flex下省略号的问题怎么解决文章都会有所收获，下面我们一起来看看吧。

最近在搞微信小程序，发现flex下使用省略号是没有效果的，而且还会打乱预期的结构，查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下，依然不行，原来在上层父级就是flex那一级别也需要设置 min-width:0; 就是可以理解为 省略号标签的flex-item以及所在的flex父级 都需要设置min-width:0;

CSS：

.flex {        display: flex;        align-items: center;        align-content: center;        justify-content: space-between;        min-width: 0; /* 这里也要设置 */}.flex__item {        min-width: 0;  /* 这里需要设置 */}.flex__item--fixed {        flex: 0 0 auto;}.fs--ellip {        overflow: hidden;        white-space: nowrap;        text-overflow: ellipsis;}.home-shop {  max-width: 750px;}.home-shop__img {                width: 98px;                height: 98px;        }.home-shop__main {  padding: 0 36px 0 18px;}.home-shop__fans {  padding: 16px 16px 16px 26px;  border-left: 2px solid #eee;}

　HTML：

                
                                                
                                
杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字
                                
社区小商城
                        
                
                
                        
                                
568
                                
粉丝数
                        
                        
                                
1898
                                
购买指数
                        
                
        

关于"flex下省略号的问题怎么解决"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"flex下省略号的问题怎么解决"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。