[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,36 +1,38 @@
 <view class="custom-class van-card {{ centered ? 'van-card--center' : '' }}">
-  <view class="van-card__thumb" bind:tap="onClickThumb">
+  <view class="van-card__header">
-    <image
+    <view class="van-card__thumb" bind:tap="onClickThumb">
-      wx:if="{{ thumb }}"
+      <image
-      src="{{ thumb }}"
+        wx:if="{{ thumb }}"
-      mode="{{ thumbMode }}"
+        src="{{ thumb }}"
-      lazy-load="{{ lazyLoad }}"
+        mode="{{ thumbMode }}"
-      class="van-card__img thumb-class"
+        lazy-load="{{ lazyLoad }}"
-    />
+        class="van-card__img thumb-class"
-    <slot name="thumb" />
+      />
-    <van-tag
+      <slot name="thumb" />
-      wx:if="{{ tag }}"
+      <van-tag
-      mark
+        wx:if="{{ tag }}"
-      type="danger"
+        mark
-      custom-class="van-card__tag"
+        type="danger"
-    >
+        custom-class="van-card__tag"
-      {{ tag }}
+      >
-    </van-tag>
+        {{ tag }}
-  </view>
+      </van-tag>
+    </view>
 
-  <view class="van-card__content">
+    <view class="van-card__content">
-    <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
+      <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
-    <slot wx:else name="title" />
+      <slot wx:else name="title" />
 
-    <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
+      <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
-    <slot wx:else name="desc" />
+      <slot wx:else name="desc" />
 
-    <slot name="tags" />
+      <slot name="tags" />
 
-    <view class="van-card__bottom">
+      <view class="van-card__bottom">
-      <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
+        <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
-      <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
+        <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
-      <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
+        <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
+      </view>
     </view>
   </view>