多行文本溢出 TextOverflow

📦 引入方式

import { TextOverflow } from '@itera-web/react-ui-textoverflow';

🧩 使用示例

📚 基本使用

示例
源码

偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格

  <TextOverflow className="w-full" lineHeight={1.5} lines={2}>
    偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI
    组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI
    组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI
    组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格偏 UI 组件库风格
  </TextOverflow>

📚 自定义控制按钮文本

示例
源码

这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。

  <TextOverflow
    lines={2}
    openText={<PanelTopOpen />}
    closeText={<PanelBottomOpen />}
  >
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
    这里是一段示例文本，超过三行时会显示省略号，并可使用自定义按钮切换展开和收起。
  </TextOverflow>

🧩 Props

属性名	类型	默认值	描述
`className`	`string`	-	自定义样式类，可用于调整宽度、字体、边距等。
`lines`	`number`	`1`	限制显示的最大行数，超出则显示省略号。
`lineHeight`	`number`	`1.5`	文本行高，用于计算溢出高度和折叠效果。
`openText`	`React.ReactNode \| string`	`''`	自定义展开按钮内容，若不传则使用默认。
`closeText`	`React.ReactNode \| string`	`''`	自定义收起按钮内容，若不传则使用默认。
`children`	`React.ReactNode`	-	要显示的文本或内容，可为字符串、JSX 或其他 React 元素。

🔧 特性

多行溢出处理: 自动判断文本是否溢出指定行数，并显示省略号。
展开/收起功能: 当文本溢出时，自动显示“展开”按钮，点击可以查看完整内容，支持自定义按钮。
自适应布局: 支持动态内容变化和容器尺寸变化，通过 ResizeObserver 自动检测溢出状态。
样式可定制: 支持 className 和 lineHeight 调整，结合 Tailwind 或自定义 CSS 灵活使用。

✅ 注意事项

children 内部直接放文本时，MDX 或 JSX 可能自动包裹 <p>，如果不希望出现 <p>，可以使用 {} 包裹文本：

<TextOverflow>{`这里是文本内容`}</TextOverflow>

lineHeight 与 lines 的设置会影响折叠高度，需要合理配置。

📦 引入方式​

🧩 使用示例​

📚 基本使用​

📚 自定义控制按钮文本​

🧩 Props​

🔧 特性​

✅ 注意事项​