1、创建组件LineWrap.js
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'antd';
import Styles from './TableList.less';
export default class LineWrap extends PureComponent {
static propTypes = {
title: PropTypes.string,
lineClampNum: PropTypes.number,
};
render() {
const { title, lineClampNum } = this.props;
return (
<Tooltip placement="topLeft" title={title}>
<span className={Styles.col} style={{ WebkitLineClamp: lineClampNum }}>
{title}
</span>
</Tooltip>
);
}
}
2、TableList.less中添加样式
.col {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
width: 80px;
}
3、在页面中引用
import styles from './TableList.less';
import LineWrap from './LineWrap';
{
title: '数据库表名',
dataIndex: 'dbTableName',
width: 100,
render: (text, record) => {
return <LineWrap title={text} lineClampNum={2} />;
},
},
4、显示效果