超过行数支持展开/收起。
<TextEllipsis
content="似水流年是一个人所有的一切,只有这个东西,才真正归你所有。其余的一切,都是片刻的欢娱和不幸,转眼间就已跑到那似水流年里去了。"
expandText="展开"
collapseText="收起"
/>
通过设置 rows
限制展示行数。
<TextEllipsis
content="那一天我二十一岁,在我一生的黄金时代。我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。"
rows={2}
expandText="展开"
collapseText="收起"
/>
通过设置 position
控制省略位置。
<TextEllipsis
content="那一天我二十一岁,在我一生的黄金时代。我有好多奢望。我想爱,想吃,还想在一瞬间变成天上 半明半暗的云。后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。"
position="start"
rows={3}
expandText="展开"
collapseText="收起"
/>
<TextEllipsis
content="那一天我二十一岁,在我一生的黄金时代。我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。"
position="middle"
rows={3}
expandText="展开"
collapseText="收起"
/>
通过 ref 可以获取到 TextEllipsis 实例并调用实例方法
const wrapRef = useRef<TextEllipsisInstance>(null);
const onClick = () => {
wrapRef.current?.toggle(true)
}
return (
<Block variant="card" title="方法调用">
<TextEllipsis ref={wrapRef} content="那一天我二十一岁,在我一生的黄金时代。我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失,最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。" position="start" rows={3} expandText="展开" collapseText="收起" />
<Button onClick={onClick}>展开</Button>
</Block>
)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
rows | 展示的行数 | number | string | 1 |
content | 需要展示的文本 | string | - |
expandText | 展开操作的文案 | string | - |
collapseText | 收起操作的文案 | string | - |
dots | 省略号的文本内容 | string | '...' |
position | 省略位置,可选值为 start middle | string | 'end' |
通过 ref
可以获取到 TextEllipsis 实例并调用实例方法
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
toggle v0.7.0 | 切换文本的展开状态,传 true 为展开,false 为收起,不传参为切换 | expanded?: boolean | - |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—text-ellipsis-font-size | 14px * $hd | 文本字体大小 |
—text-ellipsis-content-font-color | var(—gray-8) | 文本字体颜色 |
—text-ellipsis-line-height | 1.6 | 文本的行高 |
—text-ellipsis-action-color | var(—blue) | 操作按钮的颜色 |