這種情景怎么解釋?display:flex 遭遇 white-space: nowrap;
問題描述
html如下,使用了flex-box布局,左邊圖片的img-box定寬,右邊的css定義了flex-item,然后對shop-name進(jìn)行了單行不換行截?cái)啵@時(shí)候就發(fā)現(xiàn)左邊的圖片被擠扁了,小于定的寬度。發(fā)生這個(gè)情況在chrome上,ios和安卓的微信下正常.
chrome效果見圖:

<a href="#" class="coupons-item flex"> <div class="img-box"><img src="1.jpg" /></div> <div class="flex-item"><h3 class="shop-name">有家餐廳(京華城店)</h3><div class="text">滿100減20</div> </div></a>
(scss)
.coupons-item{ padding:1rem; color:#000; text-decoration: none; border-bottom:1px solid $gray-border-color; .img-box{ width:6rem; height:6rem; margin-right:1rem; @include radius(50%); overflow: hidden; img{ display: block; width:100%; height:100%; @include radius(50%); } } .shop-name{ line-height:2; height:3.6rem; font-weight:normal; font-size:1.8rem; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .text{ font-size:1.4rem; }}
問題解答
回答1:之前遇到過,解決辦法:首先.flex-item設(shè)置下最小寬度
min-width:0
然后.shopname設(shè)置下寬度
width:100%
相關(guān)文章:
1. boot2docker無法啟動(dòng)2. docker-compose中volumes的問題3. java - SSH框架中寫分頁時(shí)service層中不能注入分頁類4. node.js - antdesign怎么集合react-redux對input控件進(jìn)行初始化賦值5. 關(guān)于docker下的nginx壓力測試6. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.7. 老師,按tab鍵不起作用怎么回事8. dockerfile - 為什么docker容器啟動(dòng)不了?9. mac里的docker如何命令行開啟呢?10. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””

網(wǎng)公網(wǎng)安備