Preview Updated 2026-05-10

Text ellipsis

Multi-line text truncation with ellipsis and an optional Expand / Collapse toggle.

Basic usage

Built on CSS -webkit-line-clamp. With expandable, a ResizeObserver detects overflow and only renders the “Expand” button when the text actually overflows.

背景

这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。

src/App.vue

<script setup lang="ts">
import { CfTextEllipsis } from '@chufix-design/vue';

const long =
  '这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。';
</script>
<template>
  <div style="max-width: 360px;">
    <CfTextEllipsis :text="long" :rows="2" expandable />
  </div>
</template>

<script setup>
import { CfTextEllipsis } from '@chufix-design/vue';

const long =
  '这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。';
</script>
<template>
  <div style="max-width: 360px;">
    <CfTextEllipsis :text="long" :rows="2" expandable />
  </div>
</template>

import { CfTextEllipsis } from '@chufix-design/react';

export default function Demo() {
  const long = '这是一段较长的文字示例，用来演示多行省略与展开/收起的效果。当内容超出指定行数时会显示省略号，展开按钮把所有内容呈现出来；再次点击则收起。这段文字本身被故意写得长一些以触发溢出。';
  return (
    <>
      <CfTextEllipsis text={long} rows={2} expandable />
    </>
  );
}

API

Prop	Type	Default	Description
`text`	`string`	`—`	Text content (slot/children also supported)
`rows`	`number`	`2`	Maximum rows when collapsed
`expandable`	`boolean`	`false`	Show Expand / Collapse button
`expandText`	`string`	`'Expand'`	Expand button label
`collapseText`	`string`	`'Collapse'`	Collapse button label