flex下省略號的問題及whitespace nowrap

• 2019 年 10 月 4 日
• 筆記

最近在搞微信小程式，發現flex下使用省略號是沒有效果的，而且還會打亂預期的結構，查詢statckoverflow知道需要在父級設置min-width:0; 但是在我的嘗試下，依然不行，原來在上層父級就是flex那一級別也需要設置 min-width:0; 就是可以理解為 省略號標籤的flex-item以及所在的flex父級 都需要設置min-width:0;

預覽地址： https://jsbin.com/wafozaduja/edit?html,css,output

.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;  }

<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>