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
     }
   }


相关推荐
庸俗今天不摸鱼9 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下16 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox27 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞30 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行30 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581031 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周34 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring