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

最新推荐文章于 2024-07-31 11:19:18 发布

vue初学者

最新推荐文章于 2024-07-31 11:19:18 发布

阅读量6.7k

点赞数 2

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

1.普通div中

<!DOCTYPE html>
<html>
<head>
<style>
.icoFontlist:hover
{
width: 425px;
font-size: 12px;
border: 0px solid #ddd;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color:blue;
text-decoration:underline;
cursor:pointer;
}
.icoFontlist{
width: 225px;
font-size: 12px;
border: 0px solid #ddd;
color:#5f5f5f;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

</head>

<body>
<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<div class="icoFontlist" title="这里是全部的信222息没有省略号，接下来演示如何处理超长文本显示省略号…" >这里是全部的信息没有省略号，接下来演示如何处理超长文本显示省略号</div>

<div class="icoFontlist" >这里是全部的信息没有省略号，接下来演示如何处理超长文本显示省略号</div>

</body>

</html>

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>
  ),
}];