CSS实现超出部分的省略

1、为什么要省略

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

overflow:hidden,

text-overflow: ellipsis;

white-space: nowrap;

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

2、解决方案

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

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

然后我们就可以通过返回的是false还是true来判断文字是否需要鼠标移入后进行完整的显示,效果如下,这样就可以完成只有超出部分才鼠标移入显示,未超出部分则不需要移入显示。

3、寄语

上面这种应该是能准确判断是否需要开启鼠标移入显示完整内容,需要的小伙伴可以研究实现逻辑,欢迎大家进行相关交流

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim5 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron