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.hqwc.cn/news/110143.html

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

相关文章

python科研作图

1、气泡图 气泡图是一种在xy轴上显示三个维度的数据的有效方式。在气泡图中&#xff0c;基本上&#xff0c;每个气泡代表一个数据点。横坐标和纵坐标的位置代表两个维度&#xff0c;气泡的大小则代表第三个维度。 在这个例子中&#xff0c;我们用numpy库生成了一些随机数据&a…

软件测试常问面试题

1、讲一下你最熟悉的模块是怎么测试的&#xff1f; 2、fiddler如何抓https请求&#xff1f; 步骤&#xff1a; 设置浏览器http代理 安装证书 导入证书&#xff0c;端口号8888 手机端获取fiddler的地址&#xff0c;配置无线局域网代理&#xff0c;安装手机证书。 3、jmeter如何参…

【C# Programming】继承、接口

一、继承 1、派生 继承在相似而又不同的概念之间建立了类层次概念。 更一般的类称为基类&#xff0c;更具体的类称为派生类。派生类继承了基类的所有性质。 定义派生类要在类标识符后面添加一个冒号&#xff0c;接着添加基类名。 public class PdaItem {public string Name {…

【Spring Boot系列】- Spring Boot侦听器Listener

【Spring Boot系列】- Spring Boot侦听器Listener 文章目录 【Spring Boot系列】- Spring Boot侦听器Listener一、概述二、监听器Listener分类2.1 监听ServletContext的事件监听器2.2 监听HttpSeesion的事件监听器2.3 监听ServletRequest的事件监听器 三、SpringMVC中的监听器3…

【Redis】3、Redis主从复制、哨兵、集群

Redis主从复制 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(Master)&#xff0c;后者称为从节点(Slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从节点。 默认情况下&#xff0c;每台Redis服务器…

HeyFriday AI:智能AI写作工具

【产品介绍】​ 名称 HeyFriday AI 具体描述​ HeyFriday是一款智能AI写作工具&#xff0c;可以帮助用户快速生成博客、广告、创意故事等各种类型的文本内容&#xff0c;节省时间和金钱。​HeyFriday的团队由前谷歌NLP科学家&#xff08;ALBERT的第一作者&#xff…

本地docker注册证书docker login连接到harbor仓库、利用shell脚本将大量镜像pull、tag、push到私有harbor仓库

1. 本地docker注册证书docker login连接到harbor仓库&#xff1a; 我们使用docker login/push/pull去与Harbor打交道&#xff0c;上传下载镜像等。 但是可能会出现x509: certificate signed by unknown authority之类的错误。 [roottest01 harbor.dev]# docker login harbor.d…

[Linux入门]---搭建Linux环境

1.Linux环境的搭建方式 使用Linux操作系统的三种途径&#xff1a; 1.直接安装在物理机上&#xff0c;但是由于 Linux 桌面使用起来非常不友好&#xff0c;不推荐。 2.使用虚拟机软件&#xff0c;将 Linux 搭建在虚拟机上&#xff0c;但是由于当前的虚拟机软件(如 VMWare 之类的…

博客系统(升级(Spring))(二)获取当前用户信息、对密码进行加密、设置统一数据格式、设置未登录拦截、线程池

博客系统&#xff08;二&#xff09; 博客系统获取当前用户的信息对密码进行加密和解密的操作设置统一的数据返回格式设置未登录拦截设置线程池 博客系统 博客系统是干什么的&#xff1f; CSDN就是一个典型的博客系统。而我在这里就是通过模拟实现一个博客系统&#xff0c;这是…

CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)

前面的文章已经介绍了Layout 组件 、ScrollView 组件 、PageView 组件 。 想了解的朋友&#xff0c;请查看 CocosCreator3.8研究笔记&#xff08;十八&#xff09;CocosCreator UI组件&#xff08;二&#xff09;。 今天我们主要介绍CocosCreator 常用组件&#xff1a;Butt…

Idea安装webservice插件

打开Idea的settings菜单&#xff0c;选择Plugins&#xff0c;模糊搜索"Web Ser"&#xff0c;安装以下3个红框内插件&#xff1a; 安装好以上3个插件后&#xff0c;就可以根据需求生成webservice客户端或者webservice服务端了。

Java-华为真题-预定酒店

需求&#xff1a; 放暑假了&#xff0c;小王决定到某旅游景点游玩&#xff0c;他在网上搜索到了各种价位的酒店&#xff08;长度为n的数组A&#xff09;&#xff0c;他的心理价位是x元&#xff0c;请帮他筛选出k个最接近x元的酒店&#xff08;n>k>0&#xff09;&#xff…