今天小编跟大家讲解下有关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:
<div class="flex box home-shop"> <div class="flex"> <img class="flex__item--fixed home-shop__img"src="https://Javascript.shop/apple-touch-icon.png"/> <div class="flex__item home-shop__main"> <div class="fsz28 fs--ellip">很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字杰的社区商城很长很长的文字很长很长的文字</div> <div class="fsz22 color-9">社区小商城</div> </div> </div> <div class="flex flex__item--fixed"> <div class="text-c home-shop__fans"> <div class="fsz28 color-cyan bold">568</div> <div class="fsz22 color-9">粉丝数</div> </div> <div class="text-c home-shop__hot"> <div class="fsz28 color-o bold">1898</div> <div class="fsz22 color-9">购买指数</div> </div> </div> </div>来源:爱蒂网