这种情景怎么解释?display:flex 遭遇 white-space: nowrap;
高洛峰
高洛峰 2016-10-24 16:46:22
0
1
1016

html如下,使用了flex-box布局,左边图片的img-box定宽,右边的css定义了flex-item,然后对shop-name进行了单行不换行截断,这时候就发现左边的图片被挤扁了,小于定的宽度。发生这个情况在chrome上,ios和安卓的微信下正常.

chrome效果见图:

1.jpg

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


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全員に返信(1)
三叔

之前遇到过,解决办法:
首先.flex-item设置下最小宽度

min-width:0

然后.shopname设置下宽度

width:100%


いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!