[bugfix] Card: desc ellipsis (#1179)

example/pages/card/index.wxml

@@ -4,32 +4,24 @@
       num="2"
       price="2.00"
       desc="描述信息"
-      title="商品标题"
+      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
       thumb="{{ imageURL }}"
     />
   </demo-block>
 
-  <demo-block title="没有商品图片">
-    <van-card
-      num="2"
-      price="2.00"
-      desc="描述信息"
-      title="商品标题"
-    />
-  </demo-block>
-
   <demo-block title="高级用法">
     <van-card
       num="2"
       tag="标签"
       price="2.00"
-      origin-price="3.00"
+      origin-price="10.00"
       desc="描述信息"
-      title="商品标题"
+      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
       thumb="{{ imageURL }}"
     >
       <view slot="tags">
-        <van-tag plain type="danger">满减</van-tag>
+        <van-tag plain type="danger" custom-class="tag">标签1</van-tag>
+        <van-tag plain type="danger">标签2</van-tag>
       </view>
       <view slot="footer" class="van-card__footer">
         <van-button size="mini" round custom-class="button">按钮</van-button>

example/pages/card/index.wxss

@@ -3,6 +3,7 @@
   background-color: #fff;
 }
 
+.tag,
 .button {
   margin-right: 5px;
 }

packages/card/README.md

@@ -31,7 +31,7 @@
 <van-card
   num="2"
   tag="标签"
-  price="2.00"
+  price="10.00"
   desc="描述信息"
   title="商品标题"
   thumb="{{ imageURL }}"

packages/card/index.less

@@ -2,19 +2,21 @@
 
 .van-card {
   position: relative;
-  display: flex;
   padding: 5px 15px;
   font-size: 12px;
   color: @text-color;
-  background: @background-color-light;
   box-sizing: border-box;
-  flex-wrap: wrap;
+  background-color: @background-color-light;
 
   &--center {
     align-items: center;
     justify-content: center;
   }
 
+  &__header {
+    display: flex;
+  }
+
   &__thumb {
     position: relative;
     width: 90px;
@@ -34,23 +36,25 @@
 
   &__content {
     position: relative;
-    height: 90px;
     flex: 1;
+    height: 90px;
+    min-width: 0; /* hack for flex box ellipsis */
   }
 
   &__title,
   &__desc {
-    line-height: 17px;
     word-break: break-all;
   }
 
   &__title {
-    max-height: 34px;
+    max-height: 32px;
+    line-height: 16px;
     font-weight: bold;
   }
 
   &__desc {
-    max-height: 17px;
+    max-height: 20px;
+    line-height: 20px;
     color: @gray-darker;
   }
 
@@ -59,7 +63,7 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    line-height: 17px;
+    line-height: 18px;
   }
 
   &__price {

packages/card/index.wxml

@@ -1,4 +1,5 @@
 <view class="custom-class van-card {{ centered ? 'van-card--center' : '' }}">
+  <view class="van-card__header">
     <view class="van-card__thumb" bind:tap="onClickThumb">
       <image
         wx:if="{{ thumb }}"
@@ -33,6 +34,7 @@
         <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
       </view>
     </view>
+  </view>
 
   <view class="van-card__footer">
     <slot name="footer" />