大连开发区做网站,wordpress页面显示什么意思,网站建设资源,静态网页模板 网站模板1、为什么要省略 在日常开发过程中我们难免会遇到后端返回给我们的的数据太长的情况#xff0c;此时我们通常采取的是...的省略方式#xff0c;其中的CSS大致如下#xff0c;既可以实现对应的省略显示#xff0c;但有些时候我们有需要用户可以查看具体的完整信息#xff0…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、寄语 上面这种应该是能准确判断是否需要开启鼠标移入显示完整内容需要的小伙伴可以研究实现逻辑欢迎大家进行相关交流
