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

TextEllipsis

Intro

Show ellipsis for long text and support for Expand/Collapse.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { TextEllipsis } from 'vant';

const app = createApp();
app.use(TextEllipsis);

Usage

Basic Usage

Show one rows by default.

<van-text-ellipsis :content="text" />

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.';
  },
};

Expand/Collapse

Support Expand/Collapse.

<van-text-ellipsis
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>

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.';
  },
};

Customize rows

Display the number of rows by setting rows.

<van-text-ellipsis
  rows="3"
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>

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.';
  },
};

API

Props

Attribute	Description	Type	Default
rows	Number of rows displayed	number | string	1
content	The text displayed	string	-
expand-text	Expand operation text	string	-
collapse-text	Collapse operation text	string	-

Events

Event	Description	Arguments
click-action	Emitted when Expand/Collapse is clicked	event: MouseEvent

Types

The component exports the following type definitions:

import type { TextEllipsisProps, TextEllipsisThemeVars } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-text-ellipsis-action-color	var(--van-blue)	-