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

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

如果你想单独使用javascript来做这件事，我会做下面的事情。给span一个id属性(这样可以很容易地从DOM中检索到它)，并将所有内容放在一个名为'content'的属性中:

<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
 white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>

然后，在javascript中，您可以在元素插入DOM后执行以下操作。

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute('title', elemContent); 
}

当然，如果使用javascript将span插入到DOM中，则可以在插入之前将内容保存在变量中。这样就不需要span上的content属性了。

如果您想使用jQuery，还有比这更优雅的解决方案。

这就是我所做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个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());
});

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

这是我的jQuery插件:

(function($) {
    'use strict';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < this.scrollWidth) {
                $(this).attr('title', $(this).text());
            } else {
                $(this).removeAttr("title");
            }
        });
    };
})(jQuery);

用法:

$("td, th").tooltipOnOverflow();

编辑:

我已经为这个插件做了一个要点。 https://gist.github.com/UziTech/d45102cdffb1039d4415

您可以用另一个跨度包围这个跨度，然后简单地测试原始/内跨度的宽度是否大于新/外跨度的宽度。注意，我说可能——这大致是基于我的情况，我在td中有一个张成空间，所以我实际上不知道它是否适用于张成空间中的张成空间。

以下是我对那些可能与我处境相似的人的建议:我只是不加修改地复制/粘贴它，即使它是在Angular环境中，我不认为这会降低可读性和基本概念。我将其编码为一个服务方法，因为我需要在多个地方应用它。我一直传递的选择器是一个类选择器，它将匹配多个实例。

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on('mouseenter', function(){
        var td = $(this)
        var span = td.find('span');

        if (!span.attr('tooltip-computed')) {
            //compute just once
            span.attr('tooltip-computed','1');

            if (span.width() > td.width()){
                span.attr('data-toggle','tooltip');
                span.attr('data-placement','right');
                span.attr('title', span.html());
            }
        }
    });
}