首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML -如何仅在激活省略号时显示工具提示

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

Stack Overflow用户
提问于 2011-03-29 23:19:00
回答 12查看 186.7K关注 0票数 247

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

代码语言:javascript
复制
.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}
代码语言:javascript
复制
<span id="myId" class="my-class"></span>
代码语言:javascript
复制
document.getElementById('myId').innerText = "...";

我想添加到此元素的工具提示与相同的内容,但我希望它只出现时,内容很长,省略号出现在屏幕上。

有什么办法可以做到吗?

ellipsis被激活时,浏览器会抛出事件吗?

*浏览器: Internet Explorer

EN

回答 12

Stack Overflow用户

发布于 2012-11-07 05:24:23

下面是一个使用内置省略号设置的方法,并在Martin Smith的注释的基础上添加title属性on-demand (使用jQuery):

代码语言:javascript
复制
$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

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

Stack Overflow用户

发布于 2015-10-30 03:11:18

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

如果你有被替换的内容,效果会很好。这样你就不必每次都运行jQuery函数了。

代码语言:javascript
复制
.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

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

Stack Overflow用户

发布于 2012-12-11 04:47:15

uosɐſ的答案基本上是正确的,但你可能不想在mouseenter事件中这样做。这将导致每次你将鼠标移到元素上时,它都会进行计算来确定是否需要它。除非元素的大小发生变化,否则没有理由这样做。

最好在将元素添加到DOM之后立即调用此代码:

代码语言:javascript
复制
var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

或者,如果您不知道它的确切添加时间,那么可以在页面加载完成后调用该代码。

如果您有不止一个元素需要这样做,那么您可以为它们提供相同的类(例如"mightOverflow"),并使用下面的代码来更新它们:

代码语言:javascript
复制
$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});
票数 32
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5474871

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档