vue文字溢出...显示el-tooltip展示

 html

          

            

              
                
                  {{ item.name }}
                
              
            
          

js

  const isTooltip = ref(false)

  const visibilityChange = (event) => {
    const ev = event.target
    const evWeight = ev.scrollWidth
    const contentWeight = ev.clientWidth
    console.log(ev, evWeight, contentWeight, 1)
    if (evWeight > contentWeight) {
      // 实际宽度 > 可视宽度  文字溢出
      isTooltip.value = false
    } else {
      // 否则为不溢出
      isTooltip.value = true
    }
  }

css

      .colony {
        margin-top: 10px;
        overflow: auto;
        &-list {
          > div {
            height: 36px;
            font-size: 14px;
            color: #404a62;
            line-height: 36px;
            padding: 0 25px;
            cursor: pointer;

            > span {
              display: block;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; // 默认不换行；
            }
          }
        }
      }