テキストが長すぎる場合は省略記号を表示し、マウスを動かすとすべて表示されます.

https://blog.csdn.net/wxnjob/article/details/42009043
1.通常div中
 <br>.icoFontlist:hover  <br>{  <br>    width: 425px;  <br>    font-size: 12px;  <br>    border: 0px solid #ddd;  <br>    overflow: hidden;  <br>    text-align: left;  <br>    text-overflow: ellipsis;  <br>    white-space: nowrap;  <br>    color:blue;  <br>    text-decoration:underline;  <br>    cursor:pointer;   <br>}  <br>.icoFontlist{  <br>    width: 225px;  <br>    font-size: 12px;  <br>    border: 0px solid #ddd;  <br>    color:#5f5f5f;  <br>    overflow: hidden;  <br>    text-align: left;  <br>    text-overflow: ellipsis;  <br>    white-space: nowrap;  <br>}  <br>
次の2つのdivにカーソルを移動すると、すべてのテキストが表示されます.
ここでは、すべての情報に省略記号がありません.次に、長いテキストを処理して省略記号を表示する方法を示します.
ここでは、すべての情報に省略記号がありません.次に、長いテキストを処理して省略記号を表示する方法を示します.
2.antd tableで
less: 

.colClass {
  text-align: center;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:90%;
}

js:

const columns1 = [{
  title: ' ',
  dataIndex: 'rank',
  key: 'rank',
  align: 'center',
  width: '25%',
}, {
  title: ' ',
  dataIndex: 'restName',
  key: 'restName',
  width: '25%',
  render:
    (text, record) => (
      <div title={record.restName} className={styles.colClass}>{record.restName}div>
    ),
}, {
  title: ' ',
  dataIndex: 'orderSaleNum',
  key: 'orderSaleNum',
  align: 'center',
  width: '25%',
}, {
  title: ' ',
  dataIndex: 'actDetail',
  align: 'center',
  width: '25%',
  render:
    (text, record) => (
      <Popover
        content={this.getContent(record.restName)}
        trigger="click"
        placement="bottom"
      >
        <Button type="primary"> Button>
      Popover>
  ),
}];

https://www.jb51.net/css/145465.html
https://www.cnblogs.com/zyl1994/p/7191400.html