元素内文字超长时显示...，并通过title提示全部文字

Posted 2021-09-13 OceanZH

思路：

鼠标移入时，通过比较元素的scrollWidth和clientWidth来判断标签文字是否超长

若是超长，设置元素的title属性

在Vue中可以把逻辑抽取为自定义指令方便的使用

---

main.js:

// 注册一个全局自定义指令 `v-title`
Vue.directive(\'title\', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    let { value } = binding;
    el.addEventListener(\'mouseenter\', function(event) {
      console.log(\'el.scrollWidth \', el.scrollWidth)
      console.log(\'el.clientWidth \', el.clientWidth)
      if (el.scrollWidth > el.clientWidth) {
        el.title = value
      } else {
        el.title = \'\'
      }
    })
  },
})

yourComponent.vue:

<template>
<div class="item-label"
    v-title="item.name"
>
    {{ item.name }}
</div>
</tempalte>

<script>
export default {
    data() {
        return {
            item:{
                name: \'123\'
            }
        }
    }
}
</script>

css:

.item-label {
    display: block;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}