mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 01:29:11 +08:00
a9bd80916d
* feat: ellipsis support tooltip * chore: Update test snapshot * test: Coverage * chore: fix ts definition * clean up
2.2 KiB
2.2 KiB
order | title | ||||
---|---|---|---|---|---|
4 |
|
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.
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);