v-data-table文本截断异常：内容消失与Tooltip显示不稳定问题

问题现象 #

• 部分场景下，主题文本在截断处理后完全消失
• 主题文本截断后仍可见时，Tooltip显示不稳定，有时出现有时不出现

原实现代码 #

模板代码 #

<v-data-table :headers="grid_headers" :items="correspondences" item-key="id">
    <template v-slot:item.subject="{ item }">
        <a :id="'ellipsisElements_1_' + item.id" class="td-text-limit">
           <span>{{ item.subject }}</span>
        </a>
        <a :id="'ellipsisElements_2_' + item.id" class="td-text-limit" style="display: none;" v-tooltip="item.subject">
           <span>{{ item.subject }}</span>
        </a>
     </template>
</v-data-table>

CSS样式 #

.td-text-limit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.015em;
    color: var(--content-color) !important;
    text-decoration: none;
    width: fit-content;
}

控制Tooltip的JS函数 #

showTooltips() 
{
     var elements = document.getElementsByClassName('td-text-limit');
     for (var i = 0; i < elements.length;) 
     {
             var element1 = elements[i];
             var element2 = elements[i + 1];
             var showTooltip = element1.offsetHeight < element1.scrollHeight;
             if (element1.id.lastIndexOf('ellipsisElements') != -1 && element2.id.lastIndexOf('ellipsisElements') != -1) 
             {
                    if (showTooltip) {
                        element1.style.display = 'none';
                        element2.style.display = '-webkit-box';
                    }
                    else {
                        element1.style.display = '-webkit-box';
                        element2.style.display = 'none';
                    }
              }

              i = i + 2;
      }
}

修复方案 #

1. 简化DOM结构，避免重复元素 #

原代码通过两个重复元素切换显示控制Tooltip，容易引发渲染冲突导致文本消失，改为单元素动态控制Tooltip显示。

2. 修正CSS宽度属性 #

width: fit-content会让容器宽度随内容自适应，无法触发正确的截断判断，改为width: 100%固定容器宽度，确保截断逻辑生效。

3. 用Vue响应式逻辑替代原生DOM操作 #

通过临时元素判断文本是否需要截断，动态绑定Tooltip，避免手动操作DOM带来的不稳定问题。

修改后的代码 #

模板代码 #

<v-data-table :headers="grid_headers" :items="correspondences" item-key="id">
    <template v-slot:item.subject="{ item }">
        <a 
            class="td-text-limit"
            v-tooltip="isTextTruncated(item.subject) ? item.subject : undefined"
        >
            <span>{{ item.subject }}</span>
        </a>
    </template>
</v-data-table>

CSS样式 #

.td-text-limit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.015em;
    color: var(--content-color) !important;
    text-decoration: none;
    width: 100%; /* 固定宽度，确保截断判断准确 */
}

组件内方法 #

methods: {
    isTextTruncated(text) {
        // 创建临时元素计算文本是否会被截断
        const tempEl = document.createElement('span');
        tempEl.style.cssText = `
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 100%;
            font-size: 12px;
            line-height: 14px;
            visibility: hidden; /* 避免临时元素显示在页面上 */
            position: absolute;
        `;
        tempEl.textContent = text;
        document.body.appendChild(tempEl);
        const isTruncated = tempEl.offsetHeight < tempEl.scrollHeight;
        document.body.removeChild(tempEl);
        return isTruncated;
    }
},
watch: {
    correspondences: {
        handler() {
            // 数据更新时模板自动重新判断截断状态
        },
        deep: true
    }
}

修复说明 #

• 移除重复DOM元素，避免切换显示时的渲染冲突，彻底解决文本消失问题
• 固定容器宽度，确保截断逻辑准确触发
• 采用响应式绑定Tooltip，仅在文本截断时显示，解决Tooltip不稳定问题
• 临时元素判断截断状态，不操作现有DOM，避免索引错误和元素获取问题

内容的提问来源于stack exchange，提问作者HNasser