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

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，不会被内容撑开，会一直按照自己定义的宽度。

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