CSS:实现文字溢出显示省略号且悬浮显示tooltip完整信息

组件: element ui中的tooltip组件
思路:通过ref获取宽度进行判断,当子级宽度大于对应标签/父级宽度显示tooltip组件

          <div class="bechmark-wrap"><ul ref="bechmarkUl"><liv-for="(item,index) in compositeBenchmarkList":key="item.compositeId":class="{'benchmark-on': nowIndex===index }"@click="benchmarkItemClick(index)"><el-tooltip placement="top-start" :disabled="isShowTooltip"><div slot="content" class="benchmark-tooltip">{{ item.secName }}</div><span:ref="'bechmarkItem'+index"@mouseover="onMouseOver('bechmarkItem'+index)">{{ item.secName }}</span></el-tooltip></li></ul></div>
  onMouseOver(refName) {// const parentWidth = this.$refs[refName].parentNode.offsetWidthconst parentWidth = this.$refs['bechmarkUl'].offsetWidthconst contentWidth = this.$refs[refName][0].offsetWidth// 判断是否开启 tooltip 功能,如果溢出显示省略号,则子元素的宽度势必短于父元素的宽度//-48是因为bechmarkUl有padding边距if (contentWidth > parentWidth - 48) {this.isShowTooltip = false} else {this.isShowTooltip = true}}

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

typecho 反序列化漏洞复现

环境搭建 下载typecho14.10.10 https://github.com/typecho/typecho/tags 安装&#xff0c;这里需要安装数据库 PHPINFO POC.php <?php class Typecho_Feed { const RSS1 RSS 1.0; const RSS2 RSS 2.0; const ATOM1 ATOM 1.0; const DATE_RFC822 r; const DATE_W3…

S32K324芯片学习笔记

文章目录 Core and architectureDMASystem and power managementMemory and memory interfacesClocksSecurity and integrity安全与完整性Safety ISO26262Analog、Timers功能框图内存mapflash Signal MultiplexingPort和MSCR寄存器的mapping Core and architecture 两个Arm Co…

【web开发】4.JavaScript与jQuery

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe…

超全60000多字详解 14 种设计模式 (多图+代码+总结+Demo)

超全60000多字详解 14 种设计模式 (多图代码总结Demo) 之前读耗子叔文章时&#xff0c;看到过有句话没有实践&#xff0c;再多的理论都是扯淡&#xff0c;个人很赞同。你觉得自己学会了&#xff0c;但实践与学会之间有着很大差别。 单例模式 (Singleton Pattern) 定义或概念 …

计算机重点学科评级B-,山东省属重点高校考情分析

山东科技大学(B-) 考研难度&#xff08;☆☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1175字预计阅读&#xff1a;3分钟 2023考情概况 山东科技大学计…

php常用算法

许多人都说 算法是程序的核心&#xff0c;一个程序的好于差,关键是这个程序算法的优劣。作为一个初级phper&#xff0c;虽然很少接触到算法方面的东西 。但是对于冒泡排序&#xff0c;插入排序&#xff0c;选择排序&#xff0c;快速排序四种基本算法&#xff0c;我想还是要掌握…

Python多进程爬取电影信息

观察翻页时详情页面url地址变化规律 import json from os import makedirs from os.path import exists import requests import logging import re from urllib.parse import urljoin import multiprocessing# 定义了下日志输出级别和输出格式 logging.basicConfig(levellog…

NLP(3)--GAN

目录 一、概述 二、算法过程 三、WGAN 1、GAN的不足 2、JS散度、KL散度、Wasserstein距离 3、WGAN设计 四、Mode Collapse and Mode Dropping 1、Mode Collapse 2、Mode Dropping 3、FID 四、Conditional GAN 一、概述 GAN&#xff08;Generative Adversial Networ…

基于uwb和IMU融合的三维空间定位算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..........................................................................kkk 0; for E…

【初识Git工具】Git工具的基本介绍

【初识Git工具】Git工具的基本介绍 一、什么是Git?1.1 Git简介1.2 Git和SVN区别1.3 常用的Git工具二、Git的起源三、Git的优点四、Git的架构五、Git的基本概念5.1 仓库(Repository)5.2 版本(Commit)5.3 分支(Branch)5.4 合并(Merge)5.5 标签(Tag)六、Git的基本使用命…

【特殊文本文件——Properties和xml文件】

特殊文本文件 一、Properties 是一个Map集合&#xff08;键值对集合&#xff09;&#xff0c;但是我们一般不会当集合用核心作用&#xff1a;Properties是用来代表属性文件的&#xff0c;通过Properties可以读写属性文件里的内容 1.使用Properties读取属性文件里的键值对数据…

【个人博客系统网站】统一处理 · 拦截器

【JavaEE】进阶 个人博客系统&#xff08;2&#xff09; 文章目录 【JavaEE】进阶 个人博客系统&#xff08;2&#xff09;1. 统一返回格式处理1.1 统一返回类common.CommonResult1.2 统一返回处理器component.ResponseAdvice 2. 统一异常处理3. 拦截器实现3.1 全局变量SESSI…

宏定义天坑记录

宏定义天坑记录 事件原委与推理过程 在编译一个使用了Protobuf的项目时出现了如下报错 [ybVM-8-7-centos boost_searcher]$ make g -o http_server http_server.cc data/raw_html.pb.cc -stdc11 -lboost_system -lboost_filesystem -lpthread -ljsoncpp -lprotobuf In file…

etcd选举源码分析和例子

本文主要介绍etcd在分布式多节点服务中如何实现选主。 1、基础知识 在开始之前&#xff0c;先介绍etcd中 Version, Revision, ModRevision, CreateRevision 几个基本概念。 1、version 作用域为key&#xff0c;表示某个key的版本&#xff0c;每个key刚创建的version为1&#…

【猿灰灰赠书活动 - 05期】- 【速学Linux:系统应用从入门到精通】

&#x1f468;‍&#x1f4bb;本文专栏&#xff1a;赠书活动专栏&#xff08;为大家争取的福利&#xff0c;免费送书&#xff09; &#x1f468;‍&#x1f4bb;本文简述&#xff1a;博文为大家争取福利&#xff0c;与机械工业出版社合作进行送书活动 &#x1f468;‍&#x1f…

【虚拟机】

虚拟机 简介VMware Workstation简介下载安装许可证密钥 CentOS简介下载 创建新的虚拟机 简介 虚拟机&#xff08;Virtual Machine&#xff0c;简称VM&#xff09;是一种软件模拟的计算机&#xff0c;它在一台物理计算机上创建了一个独立的虚拟计算环境。这个虚拟环境可以运行操…

在线实时监测离子风机的功能

离子风机是一种能够通过释放大量负离子来净化空气并提供清新环境的设备。要实现联网实时在线监测离子风机&#xff0c;可以考虑以下几个步骤&#xff1a; 1. 设备接入互联网&#xff1a;离子风机需要具备网络连接功能&#xff0c;可以通过无线网络或者以太网接入路由器&#x…

[uni-app] 海报图片分享方案 -canvas绘制

文章目录 canvas使用记录先看下实际效果图绘制流程及思路1. 绘制头像, 通过drawImage来绘制2.绘制文字部分 具体代码 分享海报图片的方式,以前再RN端采用的是截图方案, 我记得组件好像是 react-native-view-shot 现在要处理uni-app的海报图片分享, 一般也有 html2canvas的相关插…

索尼 toio™应用创意开发征文|联盟国战

✨ 能用众力&#xff0c;则无敌于天下矣&#xff1b;能用众智&#xff0c;则无畏于圣人矣。 —— 孙权 前言&#xff1a; 从火爆全网的ChatGPT&#xff0c;到人人都是开发者。AI无疑贯彻了整个2023年的主题&#xff0c;从刚上幼儿园的小朋友到耄耋之年的老顽童&#xff0c;都对…