TextEllipsis - Vant 4

TextEllipsis

Intro

Display ellipsis for long text and support for expanding or collapsing text. Please upgrade vant to >= v4.1.0 before using this component.

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.

exportdefault { setup() { const text = 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.'; return { text }; }, };

Expand/Collapse

Support Expand/Collapse.

exportdefault { setup() { const text = "The fleeting time of one's life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time."; return { text }; }, };

Customize rows

Display the number of rows by setting rows.

exportdefault { setup() { const text = "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me."; return { text }; }, };

Custom Collapse Position

• Collapse the beginning part of the content:

exportdefault { setup() { const text = "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me."; return { text }; }, };

• Collapse the middle part of the content:

exportdefault { setup() { const text = "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me."; return { text }; }, };

Custom Action

Use action slots to custom action.

exportdefault { setup() { const text = 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.'; return { text }; }, };

API

Props

Attribute	Description	Type	Default
rows	Number of rows displayed	*number	string*
content	The text displayed	string	-
expand-text	Expand operation text	string	-
collapse-text	Collapse operation text	string	-
dots v4.2.0	Text content of ellipsis	string	'...'
position v4.6.2	Can be set to start``middle	string	'end'

Events

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

Methods

Use ref to get TextEllipsis instance and call instance methods.

Name	Description	Attribute	Return value
toggle	Toggle expanded status	expanded?: boolean	-

Slots

Name	Description	SlotProps
action v4.8.3	Custom action	{ expanded: boolean }

Types

The component exports the following type definitions:

importtype { TextEllipsisProps, TextEllipsisInstance, TextEllipsisThemeVars, } from'vant';

TextEllipsisInstance is the type of component instance:

import { ref } from'vue'; importtype { TextEllipsisInstance } from'vant'; const textEllipsisRef = ref<TextEllipsisInstance>(); textEllipsisRef.value?.toggle();

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)	Color of action text
--van-text-ellipsis-line-height	1.6	Line height of text