Display ellipsis for long text and support for expanding or collapsing text. Please upgrade vant to >= v4.1.0 before using this component.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { TextEllipsis } from 'vant';\n\nconst app = createApp();\napp.use(TextEllipsis);\nShow one rows by default.
\n<van-text-ellipsis :content="text" />\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n return { text };\n },\n};\nSupport Expand/Collapse.
\n<van-text-ellipsis\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\nexport default {\n setup() {\n const text =\n "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.";\n return { text };\n },\n};\nDisplay the number of rows by setting rows.
<van-text-ellipsis\n rows="3"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n/>\nexport default {\n setup() {\n const text =\n "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.";\n return { text };\n },\n};\n<van-text-ellipsis\n rows="1"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="start"\n/>\nexport default {\n setup() {\n const text =\n "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.";\n return { text };\n },\n};\n<van-text-ellipsis\n rows="2"\n :content="text"\n expand-text="expand"\n collapse-text="collapse"\n position="middle"\n/>\nexport default {\n setup() {\n const text =\n "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.";\n return { text };\n },\n};\nUse action slots to custom action.
<van-text-ellipsis :content="text">\n <template #action="{ expanded }">\n {{ expanded ? 'Collapse' : 'Expand' }}\n </template>\n</van-text-ellipsis>\nexport default {\n setup() {\n const text =\n 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';\n return { text };\n },\n};\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| rows | \nNumber of rows displayed | \nnumber | string | \n1 | \n
| content | \nThe text displayed | \nstring | \n- | \n
| expand-text | \nExpand operation text | \nstring | \n- | \n
| collapse-text | \nCollapse operation text | \nstring | \n- | \n
dots v4.2.0 | \nText content of ellipsis | \nstring | \n\'...\' | \n
position v4.6.2 | \nCan be set to start middle | \nstring | \n\'end\' | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| click-action | \nEmitted when Expand/Collapse is clicked | \nevent: MouseEvent | \n
Use ref to get TextEllipsis instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| toggle | \nToggle expanded status | \nexpanded?: boolean | \n- | \n
| Name | \nDescription | \nSlotProps | \n
|---|---|---|
action v4.8.3 | \nCustom action | \n{ expanded: boolean } | \n
The component exports the following type definitions:
\nimport type {\n TextEllipsisProps,\n TextEllipsisInstance,\n TextEllipsisThemeVars,\n} from 'vant';\nTextEllipsisInstance is the type of component instance:
import { ref } from 'vue';\nimport type { TextEllipsisInstance } from 'vant';\n\nconst textEllipsisRef = ref<TextEllipsisInstance>();\n\ntextEllipsisRef.value?.toggle();\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-text-ellipsis-action-color | \nvar(--van-blue) | \nColor of action text | \n
| --van-text-ellipsis-line-height | \n1.6 | \nLine height of text | \n