ant Table td 溢出隐藏(省略号)
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.效果图