Ant Design Table cell text is too long with an ellipsis

1. Look at the effect picture first.

2. Without further ado, just upload the code:

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. Pay attention to the following key points:

If ellipsis is set to true, then the table will become fixed and will not be stretched by the content, and will always follow the width defined by yourself.

At the same time, add these three key styles to the content to be rendered: