fix(components): [text] not support multi-line ellipsis (#11976)

* docs(components): [text] line-clamp prop and update example

* test(components): [text] line-clamp test

* fix(components): [text] not support multi-line ellipsis

* docs: updata

---------

Co-authored-by: qiang <qw13131wang@gmail.com>

packages/components/text/__tests__/text.test.tsx

@@ -5,7 +5,43 @@ import Text from '../src/text.vue'
 const AXIOM = 'Rem is the best girl'
 
 describe('Text.vue', () => {
-  test('render text & class', () => {
+  test('create', () => {
+    const wrapper = mount(() => <Text />)
+
+    expect(wrapper.classes()).toContain('el-text')
+  })
+
+  test('type', () => {
+    const wrapper = mount(() => <Text type="success" />)
+
+    expect(wrapper.classes()).toContain('el-text--success')
+  })
+
+  test('size', () => {
+    const wrapper = mount(() => <Text size="large" />)
+
+    expect(wrapper.classes()).toContain('el-text--large')
+  })
+
+  test('truncated', () => {
+    const wrapper = mount(() => <Text truncated />)
+
+    expect(wrapper.classes()).toContain('is-truncated')
+  })
+
+  test('line-clamp', () => {
+    const wrapper = mount(() => <Text line-clamp="2" />)
+
+    expect(wrapper.classes()).toContain('is-line-clamp')
+  })
+
+  test('tag', () => {
+    const wrapper = mount(() => <Text tag="del" />)
+
+    expect(wrapper.vm.$el.tagName).toEqual('DEL')
+  })
+
+  test('default slot', () => {
     const wrapper = mount(() => (
       <Text
         v-slots={{
@@ -13,35 +49,7 @@ describe('Text.vue', () => {
         }}
       />
     ))
-    const vm = wrapper.vm
 
-    expect(vm.$el.classList.contains('el-text')).toEqual(true)
     expect(wrapper.text()).toEqual(AXIOM)
   })
-
-  test('type', () => {
-    const wrapper = mount(() => <Text type="success" />)
-    const vm = wrapper.vm
-    expect(vm.$el.classList.contains('el-text--success')).toEqual(true)
-  })
-
-  test('size', () => {
-    const wrapper = mount(() => <Text size="large" />)
-    const vm = wrapper.vm
-    expect(vm.$el.className.includes('el-text--large')).toEqual(true)
-    expect(vm.$el.className.includes('el-text--default')).toEqual(false)
-    expect(vm.$el.className.includes('el-text--small')).toEqual(false)
-  })
-
-  test('truncated', () => {
-    const wrapper = mount(() => <Text truncated />)
-    const vm = wrapper.vm
-    expect(vm.$el.className.includes('is-truncated')).toEqual(true)
-  })
-
-  test('tag', () => {
-    const wrapper = mount(() => <Text tag="del" />)
-    const vm = wrapper.vm
-    expect(vm.$el.tagName).toEqual('DEL')
-  })
 })

packages/components/text/src/text.ts

@@ -1,6 +1,5 @@
 import { buildProps } from '@element-plus/utils'
 import { componentSizes } from '@element-plus/constants'
-import type Text from './text.vue'
 
 import type { ExtractPropTypes } from 'vue'
 
@@ -27,6 +26,12 @@ export const textProps = buildProps({
   truncated: {
     type: Boolean,
   },
+  /**
+   * @description maximum lines
+   */
+  lineClamp: {
+    type: [String, Number],
+  },
   /**
    * @description custom element tag
    */
@@ -35,5 +40,5 @@ export const textProps = buildProps({
     default: 'span',
   },
 } as const)
+
 export type TextProps = ExtractPropTypes<typeof textProps>
-export type TextInstance = InstanceType<typeof Text>

packages/components/text/src/text.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="tag" :class="textKls">
+  <component
+    :is="tag"
+    :class="textKls"
+    :style="{ '-webkit-line-clamp': lineClamp }"
+  >
     <slot />
   </component>
 </template>
@@ -8,6 +12,7 @@
 import { computed } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { useFormSize } from '@element-plus/components/form'
+import { isUndefined } from '@element-plus/utils'
 import { textProps } from './text'
 
 defineOptions({
@@ -24,5 +29,6 @@ const textKls = computed(() => [
   ns.m(props.type),
   ns.m(textSize.value),
   ns.is('truncated', props.truncated),
+  ns.is('line-clamp', !isUndefined(props.lineClamp)),
 ])
 </script>