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 (
      
        {title}
      
    );
  }
}

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 
}

3.效果图

ant Table td 溢出隐藏(省略号)_第1张图片

你可能感兴趣的:(ant Table td 溢出隐藏(省略号))