vue中多行(单行)文本溢出才会出现提示的自定义指令

 

// 以下代码可以直接粘贴进自己的`.vue`文件中查看效果
<template>
  <div class="parent">
    <h3>标题</h3>
    <div class="child" v-ellipsis="3">
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:
        "好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。",
    };
  },
  directives: {
    ellipsis: {
      inserted: function (el, binding) {
        // 获取期望的文本行数，默认为1
        const n = binding.value || 1;
        // （1）实现超出n行有省略号
        el.style.display = "-webkit-box";
        el.style.webkitBoxOrient = "vertical";
        el.style.webkitLineClamp = n;
        el.style.overflow = "hidden";
        // （2）实现鼠标移入在溢出情况下才有提示文案
        if (el.clientHeight < el.scrollHeight) {
          el.title = el.innerHTML;
        }
      },
    },
  },
};
</script>

<style>
.parent {
  display: flex;
  align-items: center;
  width: 200px;
  font-size: 12px;
  border: 1px solid #aaa;
}
h3 {
  margin-right: 4px;
  white-space: nowrap;
}
</style>

多行使用方式：

<div class="child" v-ellipsis="3">
  {{ msg }}
</div>