HTML - 如何仅在激活省略号时显示工具提示

javascript html css tooltip ellipsis

2022-08-30 00:24:33

我的页面中有一个动态数据的跨度，具有样式。ellipsis

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

我想添加具有相同内容的此元素工具提示，但我希望它仅在内容很长并且省略号出现在屏幕上时才显示。

有什么办法可以做到这一点吗？
浏览器在激活时是否会引发事件？ellipsis

*浏览器：互联网浏览器

答案 1

以下是使用内置省略号设置的方法，并根据Martin Smith的评论添加属性按需（使用jQuery）：title

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});

答案 2

这是一个纯CSS解决方案。无需 jQuery。它不会显示工具提示，而只会在鼠标悬停时将内容扩展到其完整长度。

如果您有被替换的内容，则效果很好。那么你不必每次都运行jQuery函数。

.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}