ant Table td 溢出隐藏（省略号）

1.创建组件

components/LineWrap/index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/**  * 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

?

1 2 3 4 5 6 7 8 9

.lineEllipsis{   display: -webkit-box;   // -webkit-line-clamp: 2;   overflow: hidden;   text-overflow: ellipsis;   /* autoprefixer: off */   -webkit-box-orient: vertical;   /* autoprefixer: on */ }

2.引用

?

1 2 3 4

width: '35%', render:(text,record) => {   return <LineWrap title={text} lineClampNum={2} /> }

3.效果图