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

组件: element ui中的tooltip组件

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

bash 复制代码
          <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>
bash 复制代码
  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
     }
   }


相关推荐
ZTeam前端全栈进阶圈1 分钟前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23332 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
摸着石头过河的石头6 分钟前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm9 分钟前
前端开发之ps基本使用
前端·css
Ashley的成长之路11 分钟前
NativeScript-Vue 开发指南:直接使用 Vue构建原生移动应用
前端·javascript·vue.js
衿璃11 分钟前
Flutter应用架构设计的思考
前端·flutter
朕的剑还未配妥11 分钟前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·vue.js
JNU freshman41 分钟前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿1 小时前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树1 小时前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端