feat(TextEllipsis): add van-text-ellipsis-line-height CSS var (#11620)

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  |

packages/vant/src/text-ellipsis/README.zh-CN.md

@@ -20,7 +20,7 @@ app.use(TextEllipsis);
 
 ### 基础用法
 
-默认展示`1`行，超过`1`行显示省略号。
+默认展示 `1` 行，超过 `1` 行显示省略号。
 
 ```html
 <van-text-ellipsis :content="text" />
@@ -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_             | 文本的行高     |

packages/vant/src/text-ellipsis/demo/index.vue

@@ -49,7 +49,12 @@ const t = useTranslate({
 </template>
 
 <style lang="less">
-.van-text-ellipsis {
-  padding: 0 20px;
+.demo-text-ellipsis {
+  font-size: 15px;
+  background-color: var(--van-background-2);
+
+  .van-text-ellipsis {
+    padding: 0 20px;
+  }
 }
 </style>

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 {