【多余内容使用省略号代替】多余内容使用省略号代替,el-tooltip,vue_el-descriptions-item的label过程能否使用省略代替?

---

vue中配合el-tooltip实现多余内容使用省略号代替,鼠标移入展示隐藏内容`

一、css部分

.tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
1
2
3
4
5

二、html部分

<el-tooltip offect="dark" content="展示内容" placement="top" :disabled="isShowTooltip" ><span	  @mouseenter="mouseEnter($event)"	  class="tag">内容</span>
</el-tooltip>
1
2

三、js部分

没有超出内容则不出现提示框

mouseEnter(e) {
  const offsetWidth = e.target.offsetWidth;
  const scrollWidth = e.target.scrollWidth;
  this.isShowTooltip = scrollWidth <= offsetWidth;
},
1
2
3
4
5

---