css3 - 這種情景怎么解釋？display:flex 遭遇 white-space: nowrap;

問題描述

html如下，使用了flex-box布局，左邊圖片的img-box定寬，右邊的css定義了flex-item，然后對shop-name進行了單行不換行截斷，這時候就發現左邊的圖片被擠扁了，小于定的寬度。發生這個情況在chrome上，ios和安卓的微信下正常.

chrome效果見圖：

<a href='http://www.wxshucaidpc.com/wenda/5874.html#' class='coupons-item flex'> <p class='img-box'><img src='http://www.wxshucaidpc.com/wenda/1.jpg' /></p> <p class='flex-item'><h3 class='shop-name'>有家餐廳（京華城店）</h3><p class='text'>滿100減20</p> </p></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; }}

問題解答

之前遇到過，解決辦法：首先.flex-item設置下最小寬度

min-width:0

然后.shopname設置下寬度

width:100%回答2：

shop-name定義寬度浮動試下

給.shop-name設一個最大寬度試試吧