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

news2024/9/21 19:43:09

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

          <div class="bechmark-wrap">
            <ul ref="bechmarkUl">
              <li
                v-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.offsetWidth
     const parentWidth = this.$refs['bechmarkUl'].offsetWidth
     const contentWidth = this.$refs[refName][0].offsetWidth
     // 判断是否开启 tooltip 功能,如果溢出显示省略号,则子元素的宽度势必短于父元素的宽度
     //-48是因为bechmarkUl有padding边距
     if (contentWidth > parentWidth - 48) {
       this.isShowTooltip = false
     } else {
       this.isShowTooltip = true
     }
   }

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

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

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

相关文章

SVN 索引版本与打包版本号不匹配

今天突然遇到了一个问题&#xff0c;SVN上传不了&#xff0c;错误提示如下&#xff1a; 解决方法&#xff1a; 1.其实&#xff0c;这是SVN库不小心搞坏了&#xff0c;只能重新再创建一个SVN仓库了。

Java jvm 内存溢出分析

1.如何分析jvm内存溢出呢 我们经常用visualVm监控Jvm的内存&#xff0c;cpu&#xff0c;线程的使用情况&#xff0c;通常可以根据内存不断增长来判断内存是否存在不释放。但是我们不可能时时盯着去看&#xff0c;这里涉及jvm堆内存配置&#xff0c;堆内存参数配置和调优会在其…

mongodb数据库操作

1、启动mongodb /usr/local/mongodb/bin/mongod --dbpath /var/mongodb/data/--logpath /var/mongodb/logs/log.log &在mongodb启动命令中 --dbpath 指定mongodb的数据存储路径 --logpath 指定mongodb的日志存储路径 2、停止mongodb 第一步先进入mongo命令行模式 第二…

nvm管理多个版本的nodejs

1. 已经安装过nodejs在安装nvm的步骤 1.安装nvmhttps://github.com/coreybutler/nvm-windows/releases 2.nvm安装位置 2.nvm管理的nodejs安装位置 4.最终的安装结构 备注&#xff1a;nodejs安装 2.使用nvm安装管理nodejs 2.1配置下载镜像&#xff1a; 找到nvm安装路径…

sonarqube版本升级

官方文档&#xff1a;Upgrade guide 步骤1、停止原有sonarqube服务&#xff0c;如果是docker部署的直接停掉容器并删除 步骤2、部署最新版sonarqube&#xff0c;保留原有配置 步骤3、访问sonarqube web 显示维护中&#xff0c;根据官方给出的升级方法&#xff0c;在sonarqub…

如何从公司或学校远程访问家里的电脑?

在某些情况下&#xff0c;我们需要远程访问另一台电脑&#xff0c;如在公司访问家里电脑的文件。那么&#xff0c;如何才能从公司或学校远程访问家里的电脑呢&#xff1f;这就需要用到远程访问软件了。 什么是远程访问软件&#xff1f; 远程访问软件是一种允许从本地电脑远…

python基础教程: while 循环语句用法

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 话不多说&#xff0c;直接开搞&#xff0c;如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 一.while 循环结构 特征: 减少代码冗余,提升代码效率 语法: while 条件表达式:code1code2...1.初始化一个变量 2.写上…

高速文件扫描仪:从繁琐到高效的革命性转变

高速文件扫描仪是办公设备中的重要一员&#xff0c;其主要功能是将纸质文件快速转换为数字格式&#xff0c;从而方便存储、传输和管理。那么&#xff0c;这个设备是如何起源并逐步发展起来的呢&#xff1f; 随着信息技术的不断推进&#xff0c;人们对数字化办公的需求变得越来…

Windows 10压缩卷参数错误怎么办?

压缩卷显示参数错误&#xff0c;这种情况很多用户都遇到过&#xff0c;遇到这种情况表示分区表信息与实际信息不符。因此&#xff0c;Windows不允许您对此驱动器进行任何更改&#xff0c;包括缩小卷大小。导致此问题的原因有很多&#xff0c;例如&#xff1a;病毒攻击、文件系统…

【验证码逆向专栏】房某下登录滑块逆向分析

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未…

《数字图像处理-OpenCV/Python》连载(5)图像的显示

《数字图像处理-OpenCV/Python》连载&#xff08;5&#xff09;图像的显示 本书京东优惠购书链接&#xff1a;https://item.jd.com/14098452.html 本书CSDN独家连载专栏&#xff1a;https://blog.csdn.net/youcans/category_12418787.html 第1章 图像的基本操作 为了方便初学…

Discourse 的系统日志

Discourse 提供了较为完善的日志查看方式。 用得最多的可能就是 Logster 的基于 Web 的 UI 了。 Logster Discourse 的错误日志面板用的是 logster&#xff0c;采集的是 Rails/Rack 的日志&#xff0c;正常应该用 Rails::Logger 但是 discourse 做了封装。 正常的访问地址为…

《程序员职场工具库》必须及格的职场工具 —— PPT 系列1

这是《程序员职场工具库》系列文章&#xff0c;在阅读本文之前&#xff0c;建议先阅读 《程序员职场工具库》 工具导论。 前言 如果做个跟 PPT 相关的调查问卷&#xff0c;估计大部分的程序员都会避之唯恐不及。因为每次谈起 PPT 工具&#xff0c;总会让我们想起很多不太好的回…

Python数据分析实战-依次遍历dataframe每一行,对某字段进行分析处理并新增一列(附源码和实现效果)

实现功能 依次遍历每一行&#xff0c;在某列包含某个元素时新增一列进行标记 实现代码 def province_distribution_of_colleges(self, file):df pd.read_excel(os.path.join(self.datapath, file))df1 dfhua_bei [北京市,天津市,河北省,山西省,内蒙古自治区]dong_bei [辽…

vue: 使用下拉树组件@riophae/vue-treeselect

前言: 在vue中, 因为element-ui 2.X是没有tree-select组件的&#xff0c;到了element-plus就有了 riophae/vue-treeselect是一个基于 Vue.js 的树形选择器组件&#xff0c;可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能&#xff0c;可以自定义选项的样式和模…

2023如何推广外贸独立站?

答案是&#xff1a;2023外贸独立站推广可以选择谷歌SEO谷歌Ads双向运营。 在2023年&#xff0c;外贸独立站的推广方式已经不再是过去简单的搜索引擎优化或广告推送。 现代的推广手段需要更多地涵盖多样性和针对性&#xff0c;从而确保可持续的客流和利润增长。 本文将深入探…

IP6510 为“快充”而生 支持PD及各种快充协议芯片多口快充解决方案

IP6510深力科是一款集成同步开关的降压转换器、支 持 9 种输出快充协议、支持 Type-C 输出和 USB PD 协议&#xff0c;为车载充电器、快充适配器、智能排插提供 完整的解决方案。 IP6510 内置功率 MOS&#xff0c;输入电压范围是 4.5V 到 32V&#xff0c;输出电压范围是 3V 到…

MySQL表空间

MySQL表空间 文章目录 MySQL表空间1. MySQL中的表1.1 IOT表1.2 InnoDB逻辑存储结构2. 独立表空间2.1 段 segment2.1.1 段的概念2.1.2 段的分类2.1.2.1 叶子节点段主要结构2.1.2.2 非叶子节点段2.1.3 碎片区2.2 区2.2.1 区的概念2.2.2 区的结构2.2.2.1 XDES Entry结构2.3 页2.3.…

【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单

sgLazyCascader源码 <template><div :class"$options.name"><el-cascader :props"props" v-model"model" :placeholder"placeholder || 请选择" :options"options"></el-cascader></div> &l…

欧洲汽车制造商押注电力合成燃料 | 2023中国可持续燃料峰会

欧洲几家汽车制造商表示&#xff0c;所谓的电力合成燃料(e-fuels&#xff0c;利用可再生电力合成的化石燃料&#xff0c;又称电子燃料)将在欧洲汽车行业的未来发挥关键作用&#xff0c;它们相信&#xff0c;布鲁塞尔方面在替代燃料问题上的让步&#xff0c;将使它们能够在未来1…