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.效果圖