CSS实现超出部分的省略-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS实现超出部分的省略。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、为什么要省略

在日常开发过程中我们难免会遇到后端返回给我们的的数据太长的情况，此时我们通常采取的是...的省略方式，其中的CSS大致如下，既可以实现对应的省略显示，但有些时候我们有需要用户可以查看具体的完整信息，这里就那vue来距离，我们可以通过element等三方的组件库来实现对应的鼠标移入显示的功能

overflow:hidden,

text-overflow: ellipsis;

white-space: nowrap;

就如同下面这样，我们可以通过tooltip的功能来进行实现，但细心的你会发现，由于是循环遍历生成的Dom元素，因此无论我们超出显示还是未超出显示，当我们的鼠标移入后均弹窗对应的完整信息，虽然看似没有啥问题，但如果细心的研究就会发现，为什么未溢出的部分我们还是要移入显示呢？

CSS实现超出部分的省略,CSS,JS,css,前端,elementui,vue.js

2、解决方案

那我们该怎么解决呢？相比有人会提出我们可以根据对应的length来判断嘛？这不是很容易嘛，稍微想一想这样是没有问题的，但是仔细一想，万一后端返回的是汉字和数字混合的数据呢？因为数据和汉字的显示宽度不同，那我们到底以多少来判断是否开启鼠标移入显示的功能呢？因此上面那种方法看是没有问题，但仔细一想或者通过数据验证就会发现问题不小。

因此我们需要采取一种特殊的方法，通过比较文字和盒子的宽度来进行判断，这里我们可以通过盒子的offsetWidth，以及文字的white-space: nowrap;。来进行判断。首先我们可以通过添加移入事件，通过鼠标移入到哪一项去获取对应项的DOM元素，并且将其他的内容拿出来。因为我们需要获取实际文字的宽度，所以我们需要创建一个额外的DOM元素，然后通过插入到body中这样就可以获取到具体文字的宽度了，代码如下

CSS实现超出部分的省略,CSS,JS,css,前端,elementui,vue.js