1.创建组件
components/LineWrap/index.js
/**
* td 溢出隐藏 组件
*/
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'antd';
import Styles from './index.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.lineEllipsis} style={{WebkitLineClamp:lineClampNum}}>{title}</span>
</Tooltip>
);
}
}
components/LineWrap/index.less
.lineEllipsis{
display: -webkit-box;
// -webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
2.引用
width: '35%',
render:(text,record) => {
return <LineWrap title={text} lineClampNum={2} />
}
3.效果图