antd 的table的 columns 有个新属性叫ellipsis
设置成true ,那么表格就会变成fixed,不会被内容撑开,会一直按照自己定义的宽度
但是这个ellipsis 属性跟ToolTip 组件结合,会有点bug,当文字非常长的时候,虽然超出隐藏变成省略号实现了,但是tooltip的位置不对了
填坑后如下
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
{
title: '描述',
dataIndex: 'description',
width: '24.34%',
ellipsis: true,
render: (value, record) => {
return (
<Tooltip title={value}>
<div className="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
{value}
</div>
</Tooltip>
);
},
},
网友评论