diff --git a/packages/vant/src/text-ellipsis/README.md b/packages/vant/src/text-ellipsis/README.md
index 639a0860e..41815e8ad 100644
--- a/packages/vant/src/text-ellipsis/README.md
+++ b/packages/vant/src/text-ellipsis/README.md
@@ -2,7 +2,7 @@
### Intro
-Show ellipsis for long text and support for Expand/Collapse.
+Display ellipsis for long text and support for expanding or collapsing text.
### Install
@@ -31,6 +31,7 @@ export default {
setup() {
const text =
'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.';
+ return { text };
},
};
```
@@ -52,6 +53,7 @@ export default {
setup() {
const text =
'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.';
+ return { text };
},
};
```
@@ -74,6 +76,7 @@ export default {
setup() {
const text =
'Vant is a lightweight, customizable mobile component library that was open sourced in 2017. Currently Vant officially provides Vue 2 version, Vue 3 version and WeChat applet version, and the community team maintains React version and Alipay applet version.';
+ return { text };
},
};
```
@@ -109,6 +112,7 @@ import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-| Name | Default Value | Description |
-| -------------------------------- | ----------------- | ----------- |
-| --van-text-ellipsis-action-color | _var(--van-blue)_ | - |
+| Name | Default Value | Description |
+| -------------------------------- | ----------------- | -------------------- |
+| --van-text-ellipsis-action-color | _var(--van-blue)_ | Color of action text |
+| --van-text-ellipsis-line-height | _1.6_ | Line height of text |
diff --git a/packages/vant/src/text-ellipsis/README.zh-CN.md b/packages/vant/src/text-ellipsis/README.zh-CN.md
index f0f09e4d5..968cbe53d 100644
--- a/packages/vant/src/text-ellipsis/README.zh-CN.md
+++ b/packages/vant/src/text-ellipsis/README.zh-CN.md
@@ -20,7 +20,7 @@ app.use(TextEllipsis);
### 基础用法
-默认展示`1`行,超过`1`行显示省略号。
+默认展示 `1` 行,超过 `1` 行显示省略号。
```html
@@ -31,6 +31,7 @@ export default {
setup() {
const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
+ return { text };
},
};
```
@@ -48,6 +49,7 @@ export default {
setup() {
const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
+ return { text };
},
};
```
@@ -70,6 +72,7 @@ export default {
setup() {
const text =
'Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。';
+ return { text };
},
};
```
@@ -105,6 +108,7 @@ import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
-| 名称 | 默认值 | 描述 |
-| -------------------------------- | ----------------- | ---- |
-| --van-text-ellipsis-action-color | _var(--van-blue)_ | - |
+| 名称 | 默认值 | 描述 |
+| -------------------------------- | ----------------- | -------------- |
+| --van-text-ellipsis-action-color | _var(--van-blue)_ | 操作按钮的颜色 |
+| --van-text-ellipsis-line-height | _1.6_ | 文本的行高 |
diff --git a/packages/vant/src/text-ellipsis/demo/index.vue b/packages/vant/src/text-ellipsis/demo/index.vue
index 89d8040c3..b90cd574d 100644
--- a/packages/vant/src/text-ellipsis/demo/index.vue
+++ b/packages/vant/src/text-ellipsis/demo/index.vue
@@ -49,7 +49,12 @@ const t = useTranslate({
diff --git a/packages/vant/src/text-ellipsis/index.less b/packages/vant/src/text-ellipsis/index.less
index 9a5a8004f..d529c1e15 100644
--- a/packages/vant/src/text-ellipsis/index.less
+++ b/packages/vant/src/text-ellipsis/index.less
@@ -1,9 +1,10 @@
:root {
+ --van-text-ellipsis-line-height: 1.6;
--van-text-ellipsis-action-color: var(--van-blue);
}
.van-text-ellipsis {
- line-height: 1.5;
+ line-height: var(--van-text-ellipsis-line-height);
white-space: pre-wrap;
&__action {