文本超长显示省略号，鼠标移上显示全部

https://blog.csdn.net/wxnjob/article/details/42009043

1.普通div中

如果您把光标移动到下面两个 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