判断css文字发生了截断,增加悬浮提示

示例:

固定显示宽度,溢出显示...,利用了css的属性,想要实现成下面这样:

针对溢出的文字,hover显示全部。

提示很好加,使用tooltip组件就行了,难点是如何判断是否发生了文字溢出。

利用dom元素的可视宽度 clientWidth实际宽度 scrollWidth 不同就可以比较出是否发生了文字溢出。

实际宽度 > 可视宽度 = 文字溢出

那么就可以依此来判断,如下图所示,给各行增加ref属性,鼠标移入时判断是否显示对应行的提示信息。

我这里之所以鼠标移入时触发计算,是因为我卡片的宽度是动态变化的,若你那块内容宽度固定,可以在数据获取完成之后直接计算showTooltipObj的值。

全部代码如下图所示:

html 复制代码
<template>
  <div class="card">
    <ul>
      <li v-for="(item, index) in rows" :key="item.key" class="content">
        <b>{{ item.label }}:</b>
        <el-tooltip
          effect="dark"
          placement="top"
          :disabled="!showTooltipObj[index]"
          max-width="600px"
        >
          <div slot="content">
            <span>{{ data[item.key] || '--' }}</span>
          </div>
          <span
            :ref="`rowValue${index}`"
            class="value"
            @mouseenter="mouseenterFn(index)"
          >
            <span>{{ data[item.key] || '--' }}</span>
          </span>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Card",
  data() {
    // 这里存放数据
    return {
      rows: [
        {
          label: "姓名",
          key: "name",
        },
        {
          label: "年龄",
          key: "age",
        },
        {
          label: "爱好",
          key: "hobby",
        }
      ],
      data: {
        name: "张三",
        age: 10,
        hobby: "吃饭、睡觉、打篮球、玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩",
      },
      showTooltipObj: {},
    };
  },
  methods: {
    mouseenterFn(index) {
      this.$nextTick(() => {
        const dom = this.$refs[`rowValue${index}`][0];
        let flag = false;
        // 实际宽度 > 可视宽度  文字溢出
        if (dom.scrollWidth > dom.clientWidth) {
          flag = true;
        }
        this.$set(this.showTooltipObj, index, flag);
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.card {
  margin: 40px;
  width: 400px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 20px 0;
  li.content {
    margin: 0 20px;
    line-height: 22px;
    display: flex;
    b {
      white-space: nowrap;
    }
    .value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
赵得C5 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG5 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904275 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路5 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架