Ellipsis文本自动省略号
文本过长自动处理省略号,支持按照文本长度和最大行数两种方式截取。
引用方式:
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
详细使用方式请参照:独立使用 pro 组件
代码演示
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
const article =
'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
ReactDOM.render(
<div>
<Ellipsis length={100}>{article}</Ellipsis>
<h4 style={{ marginTop: 24 }}>Show Tooltip</h4>
<Ellipsis length={100} tooltip>
{article}
</Ellipsis>
</div>,
mountNode
);
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
const article = (
<p>
There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident
in September, according to the safety recall report. After meeting with US regulators in
October, the firm decided to issue a voluntary recall.
</p>
);
ReactDOM.render(
<div style={{ width: 200 }}>
<Ellipsis tooltip lines={3}>
{article}
</Ellipsis>
</div>,
mountNode
);
API#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
tooltip | 移动到文本展示完整内容的提示 | boolean | - |
length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | - |
lines | 在按照行数截取下最大的行数,超过则截取省略 | number | 1 |
fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - |