在使用树组件开发的时候常常会出现节点文本过长，超出部分省略显示的情况，下面就结合# 纯 CSS 检测文本是否溢出只对超出省略的节点进行提示。完整示例

QQ2024627-115610.gif

一、纯 CSS 检测文本是否溢出
通过css 检测出那个节点的文本是超出省略的，在相应的dom节点上添加空的 ::affter 伪元素

<style>
.custom-tree-node {
width:100%;
 display:grid;
 grid-template-columns: auto min-content;
 overflow: hidden;
}
.custom-tree-node>span{
overflow: hidden;
text-overflow: ellipsis;
}
.label1{
--show:false;
animation: check 1s;
animation-timeline: scroll(x self);
}
.label1::after{
display: none;
}
@keyframes check{
  from,to{
  --show:true;
  }
}
@container style(--show:true) {
.label1:hover::after{
display: block;
}
}
</style>

二、通过hover 事件，检测当前节点是否存在伪元素，有就动态显示到title 属性上

<el-tree
      style="max-width: 250px"
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span class="label1" @mouseenter="el => handleMouse(el,data)" :title="data.showTitle?data.label:''">{{ node.label }}</span>
          <span>
            <a   style="margin-left: 5px;"> edit </a>
            <a style="margin-left: 8px"  > del </a>
          </span>
        </span>
      </template>
    </el-tree>
<script lang="ts" setup>
import { ref } from 'vue'
 
function handleMouse(el,data){
   let display = window.getComputedStyle(el.target,'::after').display
   if(display == "block"){
      data.showTitle = true
   }else {
     data.showTitle = false
  }
}
 
</script>