需求背景

写一段简单的HTML代码：

html 复制代码

<div class="container">超级无敌大怪兽在此！</div>

此时如果我们为其加上文本溢出处理，只需简单三行css代码即可搞定：

css 复制代码

.container {
    width: 100px;
  
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果要加上hover显示完整文字的效果，也简单，各大组件库都有tooltip组件，套上就行了，我这里就简单加个title属性演示：

html 复制代码

<div class="container" title="超级无敌大怪兽在此！">超级无敌大怪兽在此！</div>

可是这样不是很合理，如果我的文字本来就没有溢出，加这个提示没有意义，我只需要这段当文字不能完全展示时，才需要有这个提示，类似这种效果：

那么现在，别往下滑了，如果是聪明的你会怎么开发这个需求呢？先想一想，再往下看。

不

给

你

看

嘿

需求方案

其实比较简单哈，监听元素的mouseenter事件，然后判断元素的scrollWidth是不是大于clientWidth，就可以知道元素是否在水平方向上发生溢出，然后再加上tooltip就好了，完整代码如下：

html 复制代码

<div class="container" onmouseover="handleMouseEnter(this)">超级无敌大怪兽在此！</div>
<div class="container large" onmouseenter="handleMouseEnter(this)">超级无敌大怪兽在此！</div>

css 复制代码

.container {
    width: 100px;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.large {
    width: 500px;
}

js 复制代码

const handleMouseEnter = (node) => {
    if (node.scrollWidth > node.clientWidth) {
        node.setAttribute('title', node.innerText);
    }
};

然后就没了，emmmmmm。。。。

对，没了，就这么简单。

总结

这个需求呢，其实如果之前没接触过，一时半会还真不太能想到什么好的解法，但其实做过一遍或者看到过别人分享的思路，之后自己做的时候一下就能想到，所以就给大伙分享一下，万一就帮到你了呢。最重要的是，我又成功水了一篇文，嘿嘿。

实现一个简单的文本溢出提示效果

需求背景

需求方案

总结