Ant Design Table 单元格文字过长用省略号表示

1.先看效果图

2.话不多说，直接上代码：

const columns = [
      {
        title: '申请日期',
        align: 'left',
        width: '10%',
        dataIndex: 'SQRQ',
        key: 'SQRQ',
        ellipsis: true,
        render: (value, record) => {
          return (
              <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                {value}
              </div>
          );
        }
      },
      {
        title: '主题',
        align: 'center',
        width: '30%',
        dataIndex: 'ZT',
        key: 'ZT',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            </div>
          );
        }
      },
      {
        title: '申请部门',
        align: 'left',
        width: '20%',
        dataIndex: 'SQBM',
        key: 'SQBM',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            </div>
          );
        }
      },
      {
        title: '申请人',
        align: 'left',
        width: '10%',
        dataIndex: 'SQR',
        key: 'SQR',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            </div>
          );
        }
      },
      {
        title: '流程类型',
        align: 'left',
        width: '20%',
        dataIndex: 'LCLX',
        key: 'LCLX',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            </div>
          );
        }
      },
      {
        title: '流程状态',
        align: 'left',
        width: '10%',
        dataIndex: 'LCZT',
        key: 'LCZT',
        render: (value, record) => {
          return (
            <div title={value} style={{ whiteSpace: 'nowrap', float: 'left', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {value}
            </div>
          );
        }
      }];

3.以下关键点要注意：

ellipsis设置成true ，那么表格就会变成fixed，不会被内容撑开，会一直按照自己定义的宽度。

同时要给要渲染的内容加上这三个关键样式：

这篇好文章是转载于：学新通技术网