antd表格显示两行文字,超过用省略号代替,鼠标移入上方显示完整文字
时间: 2023-06-12 10:07:36 浏览: 547
表格内容 超过长度用省略号代替
5星 · 资源好评率100%
可以使用antd中的`Tooltip`组件来实现这个功能。
首先,在表格的列定义中,需要使用`render`属性来渲染需要显示的内容,并在其中使用`Tooltip`组件来包裹文本。例如:
```jsx
import { Table, Tooltip } from 'antd';
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
render: text => (
<Tooltip title={text}>
<div style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{text}
</div>
</Tooltip>
),
},
{
title: '描述',
dataIndex: 'description',
key: 'description',
render: text => (
<Tooltip title={text}>
<div style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{text}
</div>
</Tooltip>
),
},
];
const data = [
{
key: '1',
name: '这是一个很长很长很长很长的名称',
description: '这是一个很长很长很长很长的描述',
},
{
key: '2',
name: '短名称',
description: '短描述',
},
];
<Table columns={columns} dataSource={data} />;
```
在上面的例子中,我们使用了一个`div`元素来包裹文本,并设置了宽度、溢出、文本溢出和空白处的显示方式。然后,我们将这个`div`元素放在了`Tooltip`组件中,并将`text`属性作为`Tooltip`的`title`属性传递进去。这样,当鼠标移入这个元素时,会显示完整的文本内容。
阅读全文