溢出内容隐藏



如果想要文本超出宽度后用省略号省略，只需要加上以下的css就行了。

3行css搞定，但是问题来了：如果我们想要当文本被省略的时候，也就是当文本超出指定的宽度后，鼠标悬浮在文本上面才展示popper，应该怎么实现呢？

CSS帮我们搞定了省略，但是JS并不知道文本什么时候被省略了，所以我们得通过JS来计算。接下来，我将介绍几种方法来实现JS计算省略。

我发现表格组件已经实现了这个功能，所以就先来学习一下它的源码。

源码地址：https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/events-helper.ts

 是 JavaScript 中的一个方法，用于创建一个 Range 对象，表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容，然后对其进行操作。

它可以：

1. 设置选中文本范围：可以使用  方法创建一个 Range 对象，并使用  和  方法设置选中文本的起始和结束位置。
2. 插入新元素：可以使用  方法创建一个 Range 对象，并使用  方法将新元素插入到文档中的指定位置。
3. 获取特定元素的位置：可以使用  方法创建一个 Range 对象，并使用  方法获取元素在文档中的位置和大小信息。

这边element就是使用range对象的getBoundingClientRect获取到元素的宽高，同时因为得到的宽高值有很多位的小数，所以element-plus做了一个判断，如果小数值小于0.001就舍弃小数部分。

接下来，就让我们进行一下复刻吧。

文字的宽度 + 盒子的左右padding  > 盒子的offsetWidth 则存在省略号

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/3350.html