实现文本溢出提示效果

徐_三岁

于 2024-03-24 18:07:25 发布

阅读量334

点赞数 1

文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_49078296/article/details/136991827

版权

本文的需求是文本溢出时显示省略号，鼠标移入文本时提示完整的文字内容。
在这里插入图片描述

 <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就好了

关注