在使用树组件开发的时候常常会出现节点文本过长，超出部分省略显示的情况，下面就结合# 纯 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>
