实现效果

本文的需求是文本溢出时显示省略号，鼠标移入文本时提示完整的文字内容。

实现代码

 <div class="container" onmouseover="handleMouseEnter(this)">鼠标移入显示全部内容</div>

<style>
.container {
	width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
 }
</style>

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

实现思路

监听元素的mouseenter事件，然后判断元素的scrollWidth是不是大于clientWidth，就可以知道元素是否在水平方向上发生溢出，然后再加上tooltip就好了