我有一个跨度与动态数据在我的页面,与省略号风格。

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

我想在这个元素的工具提示中添加相同的内容,但我希望它只在内容较长且省略号出现在屏幕上时才会出现。 有什么办法可以做到吗? 当省略号被激活时,浏览器是否抛出一个事件?

*浏览器:Internet Explorer


当前回答

我有CSS类,它决定在哪里放省略号。在此基础上,我做以下操作(元素集可能不同,我写那些,使用省略号,当然它可以是一个单独的类选择器):

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

其他回答

这是一个香草JavaScript解决方案:

var cells = document.getElementsByClassName("cell"); for(const cell of cells) { cell.addEventListener('mouseenter', setTitleIfNecessary, false); } function setTitleIfNecessary() { if(this.offsetWidth < this.scrollWidth) { this.setAttribute('title', this.innerHTML); } } .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px; border-style: solid; width: 120px; } <div class="cell">hello world!</div> <div class="cell">hello mars! kind regards, world</div>

这就是我的解决办法,真是妙不可言!

    $(document).on('mouseover', 'input, span', function() {
      var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
      var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
      if (needEllipsis === true) {
          if(hasNotTitleAttr === true){
            $(this).attr('title', $(this).val());
          }
      }
      if(needEllipsis === false && hasNotTitleAttr == false){
        $(this).removeAttr('title');
      }
  });

我有CSS类,它决定在哪里放省略号。在此基础上,我做以下操作(元素集可能不同,我写那些,使用省略号,当然它可以是一个单独的类选择器):

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

下面是一种使用内置省略号设置的方法,并根据Martin Smith的注释按需添加title属性(使用jQuery):

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

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

这就是我所做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个jQuery示例:

$.when($('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

如果你不想检查css的省略号,你可以这样简化:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

我在它周围加上了“when”,以便“setupTooltip”函数在所有标题更新之前不会执行。将"setupTooltip"替换为你的工具提示函数,*替换为你想检查的元素。如果你留下它,*会把它们都看完。

如果你只是想用浏览器的工具提示更新标题属性,你可以简化如下:

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

或不检查省略号:

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
});