乐趣区

关于javascript:元素内文字超长时显示并通过title提示全部文字

思路:

鼠标移入时,通过比拟元素的 scrollWidthoffsetWidth来判断标签文字是否超长

若是超长,设置元素的 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.offsetWidth', el.offsetWidth)
      if (el.scrollWidth > el.offsetWidth) {el.title = value} else {el.title = ''}
    })
  },
})
yourComponent.vue:
<div class="item-label"
    v-title="item.name"
>
    {{item.name}}
</div>
css:
.item-label {
    display: block;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}
退出移动版