mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-03 16:39:41 +08:00
a9bd80916d
* feat: ellipsis support tooltip * chore: Update test snapshot * test: Coverage * chore: fix ts definition * clean up
63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
---
|
|
order: 4
|
|
title:
|
|
zh-CN: 省略号
|
|
en-US: Ellipsis
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
多行文本省略。你可以通过 `tooltip` 属性配置省略展示内容，大量文本时推荐优先使用 `expandable`。
|
|
|
|
## en-US
|
|
|
|
Multiple line ellipsis support. You can use `tooltip` to config ellipsis tooltip. Recommend `expandable` when have lots of content.
|
|
|
|
```tsx
|
|
import { Typography, Switch } from 'antd';
|
|
|
|
const { Paragraph, Text } = Typography;
|
|
|
|
const Demo = () => {
|
|
const [ellipsis, setEllipsis] = React.useState(true);
|
|
|
|
return (
|
|
<>
|
|
<Switch
|
|
checked={ellipsis}
|
|
onChange={() => {
|
|
setEllipsis(!ellipsis);
|
|
}}
|
|
/>
|
|
|
|
<Paragraph ellipsis={ellipsis}>
|
|
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team.
|
|
</Paragraph>
|
|
|
|
<Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false}>
|
|
Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team. Ant
|
|
Design, a design language for background applications, is refined by Ant UED Team.
|
|
</Paragraph>
|
|
|
|
<Text
|
|
style={ellipsis ? { width: 100 } : undefined}
|
|
ellipsis={ellipsis ? { tooltip: 'I am ellipsis now!' } : false}
|
|
>
|
|
Ant Design, a design language for background applications, is refined by Ant UED Team.
|
|
</Text>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|