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

.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


当前回答

我们需要检测是否真的应用了省略号,然后显示一个工具提示来显示全文。仅仅比较“这个”是不够的。offsetWidth < this。scrollWidth"当元素几乎包含了它的内容,但宽度只多了一到两个像素,特别是对于全宽的中文/日语/韩语字符的文本。

这里有一个例子:http://jsfiddle.net/28r5D/5/

我发现了一种改进省略号检测的方法:

“这相比较。offsetWidth < this。首先,如果失败,继续步骤#2。 暂时切换css样式为{'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}。 让浏览器做中继布局。如果发生换行,元素将扩展其高度,这也意味着需要省略号。 恢复css样式。

以下是我的改进:http://jsfiddle.net/28r5D/6/

其他回答

Uosɐſ的答案基本上是正确的,但您可能不希望在mouseenter事件中这样做。这将导致它进行计算,以确定是否需要它,每次你将鼠标移到元素上。除非元素的大小正在改变,否则没有理由这样做。

在元素添加到DOM后立即调用这段代码会更好:

var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

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

如果你有多个元素需要这样做,那么你可以给它们都一个相同的类(比如"mightOverflow"),并使用这段代码来更新它们:

$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});

这是一个香草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());
    }
});

这是一个纯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;
}