feat(Style): add multi-line ellipsis classes (#4690)

src/card/index.less

@@ -1,5 +1,4 @@
 @import '../style/var';
-@import '../style/mixins/ellipsis';
 
 .van-card {
   position: relative;
@@ -47,8 +46,6 @@
     max-height: 32px;
     font-weight: @font-weight-bold;
     line-height: @card-title-line-height;
-
-    .multi-ellipsis(2);
   }
 
   &__desc {

src/card/index.tsx

@@ -100,7 +100,7 @@ function Card(
     }
 
     if (props.title) {
-      return <div class={bem('title')}>{props.title}</div>;
+      return <div class={[bem('title'), 'van-multi-ellipsis--l2']}>{props.title}</div>;
     }
   }
 

src/card/test/__snapshots__/demo.spec.js.snap

@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title">商品名称</div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title">商品名称</div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
@@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title">商品名称</div>
+          <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
             标签

src/style/README.md

@@ -10,7 +10,15 @@ When the text content length exceeds the maximum container width, the excess tex
 
 ```html
 <div class="van-ellipsis">
-  This is a paragraph of 250px width limit, the back will be omitted.
+  This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.
+</div>
+
+<div class="van-multi-ellipsis--l2">
+  This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.
+</div>
+
+<div class="van-multi-ellipsis--l3">
+  This is a paragraph that displays up to three lines of text, and the rest of the text will be omitted.
 </div>
 ```
 

src/style/README.zh-CN.md

@@ -9,7 +9,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 当文本内容长度超过容器最大宽度时，自动省略多余的文本。
 
 ```html
-<div class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</div>
+<!-- 最多显示一行 -->
+<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
+
+<!-- 最多显示两行 -->
+<div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，多余的内容会被省略</div>
+
+<!-- 最多显示三行 -->
+<div class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，多余的内容会被省略</div>
 ```
 
 ### 1px 边框

src/style/demo/index.vue

@@ -1,7 +1,8 @@
 <template>
   <demo-section>
     <demo-block :title="$t('ellipsis')">
-      <div class="van-ellipsis">{{ $t('text') }}</div>
+      <div class="van-ellipsis">{{ $t('text1') }}</div>
+      <div class="van-multi-ellipsis--l2">{{ $t('text2') }}</div>
     </demo-block>
 
     <demo-block :title="$t('hairline')">
@@ -53,14 +54,16 @@ export default {
       ellipsis: '文字省略',
       animation: '动画',
       toggle: '切换动画',
-      text: '这是一段宽度限制 250px 的文字，后面的内容会省略'
+      text1: '这是一段最多显示一行的文字，后面的内容会省略',
+      text2: '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略'
     },
     'en-US': {
       hairline: 'Hairline',
       ellipsis: 'Text Ellipsis',
       animation: 'Animation',
       toggle: 'Switch animation',
-      text: 'This is a paragraph of 250px width limit, the back will be omitted.'
+      text1: 'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+      text2: 'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.'
     }
   },
 
@@ -88,10 +91,16 @@ export default {
 @import '../../style/var';
 
 .demo-style {
-  .van-ellipsis {
+  .van-ellipsis,
-    max-width: 250px;
+  .van-multi-ellipsis--l2 {
+    max-width: 300px;
     margin-left: @padding-md;
-    font-size: 13px;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .van-ellipsis {
+    margin-bottom: @padding-md;
   }
 
   .van-hairline--top {

src/style/ellipsis.less

@@ -3,3 +3,11 @@
 .van-ellipsis {
   .ellipsis();
 }
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}