diff --git a/src/card/index.less b/src/card/index.less
index ed7754cf3..590d1d520 100644
--- a/src/card/index.less
+++ b/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 {
diff --git a/src/card/index.tsx b/src/card/index.tsx
index 5f98e3801..c671dcfce 100644
--- a/src/card/index.tsx
+++ b/src/card/index.tsx
@@ -100,7 +100,7 @@ function Card(
}
if (props.title) {
- return
-
商品名称
+
商品名称
描述信息
¥ 2.00
@@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
标签
-
商品名称
+
商品名称
描述信息
¥ 2.00
@@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
-
商品名称
+
商品名称
描述信息
标签
diff --git a/src/style/README.md b/src/style/README.md
index 3ea482211..9907d81e4 100644
--- a/src/style/README.md
+++ b/src/style/README.md
@@ -10,7 +10,15 @@ When the text content length exceeds the maximum container width, the excess tex
```html
- 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.
+
+
+
+ This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.
+
+
+
+ This is a paragraph that displays up to three lines of text, and the rest of the text will be omitted.
```
diff --git a/src/style/README.zh-CN.md b/src/style/README.zh-CN.md
index cdb787400..53597c2c3 100644
--- a/src/style/README.zh-CN.md
+++ b/src/style/README.zh-CN.md
@@ -9,7 +9,14 @@ Vant 中默认包含了一些常用样式,可以直接通过 className 的方
当文本内容长度超过容器最大宽度时,自动省略多余的文本。
```html
-这是一段宽度限制 250px 的文字,后面的内容会省略
+
+这是一段最多显示一行的文字,多余的内容会被省略
+
+
+这是一段最多显示两行的文字,多余的内容会被省略
+
+
+这是一段最多显示三行的文字,多余的内容会被省略
```
### 1px 边框
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index 7a8106319..93b19db76 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -1,7 +1,8 @@
- {{ $t('text') }}
+ {{ $t('text1') }}
+ {{ $t('text2') }}
@@ -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 {
- max-width: 250px;
+ .van-ellipsis,
+ .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 {
diff --git a/src/style/ellipsis.less b/src/style/ellipsis.less
index 15eb7f9ab..0f3f282ac 100644
--- a/src/style/ellipsis.less
+++ b/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);
+}