CSS实现超出部分的省略

news2024/9/27 2:50:59

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、寄语

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1387418.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

内网yum仓库 ftp;http方式

ftp方式 服务端 客户端 vim /etc/yum.repos.d/ftp.repo http方式 服务端 yum install httpd -y systemctl start httpd cd /var/www/html/ mkdir centos7 mount /dev/sr0 /var/www/html/centos7 客户端

*(长期更新)软考网络工程师学习笔记——Section 22 无线局域网

目录 一、IEEE 802.11的定义二、IEEE 802.11系列标准三、IEEE 802.11的两种工作模式四、CDMA/CA协议(一)CDMA/CA协议的定义(二)CDMA/CA协议的过程 五、AC与AP(一)接入控制器AC(二)无…

go的安装及配置

go的官方下载地址:All releases - The Go Programming Language​​​​​​ 1、找到对应的版本包下载,例如 wget https://golang.google.cn/dl/go1.21.6.linux-amd64.tar.gz 2、下载完成后配置解压Go源码包 tar -zxf go1.21.6.linux-amd64.tar.gz 3…

32 二叉树的定义

之前的通用树结构 采用双亲孩子表示法模型 孩子兄弟表示法模型 引出二叉树 二叉树的定义: 满二叉树和完全二叉树 对此图要有印象 满二叉树一定是完全二叉树,但是完全二叉树不一定是满二叉树 小结

博客摘录「 性能优化:__builtin_expect详解」2024年1月15日

性能优化:__builtin_expect详解___builtin_expect对性能的影响-CSDN博客https://blog.csdn.net/chudongfang2015/article/details/75710848 #define LIKELY(x) __builtin_expect(!!(x), 1) __builtin_expect宏定义中为何写成!!(x)? 首先__buildin_expec…

buuctf-Misc 题目解答分解118-120

118.[INSHack2017]sanity 打开压缩包就是一个md 文件 typora 打开 发现flag INSA{Youre_sane_Good_for_you} 119.粽子的来历 解压压缩包 ,得到文件夹如下 用010 editor 打开 我是A.doc 这个有些可以 都改成FF 保存 然后再次打开 docx 文件就发现了屈原的诗 其他b…

雍禾医疗好医生:雍禾植发张华医生立志服务好毛发患者

作为中国领先的专门从事毛发医疗服务的医疗集团,雍禾医疗提供诊疗、植发、养固等一站式毛发医疗服务,旗下拥有由专业植发品牌“雍禾植发”、医疗养固品牌“史云逊”、女性美学植发品牌“雍禾发之初”及医学假发品牌“哈发达”等组成的全产业链品牌矩阵。…

【Spring 篇】SpringMVC的数据响应:编织美妙的返回乐章

在Web开发的舞台上,数据响应就如同一场美妙的音乐演奏,而SpringMVC作为这场音乐的指挥者,如何优雅地将数据传递给前端,引发了无尽的思考和探索。本篇博客将带你走进SpringMVC的数据响应世界,解开其中的奥秘&#xff0c…

class_5:在c++中一个类包含另一个类的对象叫做组合

#include <iostream> using namespace std;class Wheel{ public://成员数据string brand; //品牌int year; //年限//真正的成员函数void printWheelInfo(); //声明成员函数 };void Wheel::printWheelInfo() {cout<<"我的轮胎品牌是&#xff1a;"<…

JDBC PrepareStatement 的使用(附各种场景 demo)

在 Java 中&#xff0c;与关系型数据库进行交互是非常常见的任务之一。JDBC&#xff08;Java Database Connectivity&#xff09;是 Java 平台的一个标准 API&#xff0c;用于连接和操作各种关系型数据库。其中&#xff0c;PreparedStatement 是 JDBC 中的一个重要接口&#xf…

数据库多表查询练习题

二、多表查询 1. 创建 student 和 score 表 CREATE TABLE student ( id INT ( 10 ) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR ( 20 ) NOT NULL , sex VARCHAR ( 4 ) , birth YEAR , department VARCHAR ( 20 ) , address VARCHAR ( 50 ) ); 创建 s…

pytest pytest-cov生成代码覆盖率报告

pytest-cov 是一个用于 pytest 的插件&#xff0c;它可以生成代码覆盖率报告。代码覆盖率是一个度量&#xff0c;表示在测试过程中执行了代码的哪些部分。这是一个非常有用的工具&#xff0c;因为它可以帮助你理解你的测试是否全面&#xff0c;是否有遗漏的代码部分。 pytest-c…

电商物流查询:未来的发展方向

在电商日益繁荣的时代&#xff0c;物流信息查询不仅关乎消费者体验&#xff0c;更影响着电商运营的效率。快速、准确地追踪物流信息至关重要。本文将简述物流信息快速追踪的价值&#xff0c;并重点介绍固乔快递查询助手这一高效查询工具及其批量查询功能。 一、物流信息快速追踪…

RAG常见七大坑

论文题目&#xff1a;《Seven Failure Points When Engineering a Retrieval Augmented Generation System》 论文地址&#xff1a;https://arxiv.org/pdf/2401.05856.pdf 这篇论文主要探讨了构建检索增强生成系统&#xff08;Retrieval Augmented Generation, RAG&#xff09;…

Javaweb之SpringBootWeb案例员工管理分页查询的详细解析

3. 员工管理 完成了部门管理的功能开发之后&#xff0c;我们进入到下一环节员工管理功能的开发。 基于以上原型&#xff0c;我们可以把员工管理功能分为&#xff1a; 分页查询&#xff08;今天完成&#xff09; 带条件的分页查询&#xff08;今天完成&#xff09; 删除员工&…

【Leetcode 2707】字符串中的额外字符 —— 动态规划

2707. 字符串中的额外字符 给你一个下标从0开始的字符串s和一个单词字典dictionary。你需要将s分割成若干个互不重叠的子字符串&#xff0c;每个子字符串都在dictionary中出现过。s中可能会有一些额外的字符不在任何子字符串中。 请你采取最优策略分割s&#xff0c;使剩下的字…

HiDataPlus 3.3.2-005 搭建(个人的一点心得体会 x86 平台)

HDP 集群搭建 前置安装 yum -y install createrepo yum install -y lrzsz yum install -y wget yum install -y vim修改当前集群机器的主机名 hostnamectl set-hostname XXX​ 这里的 XXX 就是要设置的当前机器的主机名称。主机名称是集群唯一的&#xff0c;一定不要重复&am…

【栈】Leetcode 496 下一个更大元素I

【栈】Leetcode 496 下一个更大元素I 解法1 两个单调栈解法2 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法1 两个单调栈 两个栈进行操作&#xff0c;一个栈用来遍历寻找&#xff0c;一个栈用来保留 将nums2中的元素…

c语言-数据类型(上)

目录 一、数据类型 二、常量与变量 常量&#xff1a; 变量&#xff1a; 三、进制&#xff08;八&#xff0c;十&#xff0c;十六&#xff09; 十进制&#xff1a; 八进制&#xff1a; 十六进制&#xff1a; 四、基本类型 1.整型常量&#xff1a; 2.整型变量&#xff…

Unet系列网络解析

Unet UNet最早发表在2015的MICCAI上&#xff0c;到2020年中旬的引用量已经超过了9700多次&#xff0c;估计现在都过万了&#xff0c;从这方面看足以见得其影响力。当然&#xff0c;UNet这个基本的网络结构有太多的改进型&#xff0c;应用范围已经远远超出了医学图像的范畴。我…