我们需要检测是否真的应用了省略号，然后显示一个工具提示来显示全文。仅仅比较“这个”是不够的。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/

如果你想单独使用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，还有比这更优雅的解决方案。

下面是另外两个纯CSS解决方案:

在适当的位置显示截短的文本:

.overflow { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .overflow:hover { overflow: visible; } .overflow:hover span { position: relative; background-color: white; box-shadow: 0 0 4px 0 black; border-radius: 1px; } <div> <span class="overflow" style="float: left; width: 50px"> <span>Long text that might overflow.</span> </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis. </div>

显示任意的“工具提示”:

.wrap { position: relative; } .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events:none; } .overflow:after { content:""; display: block; position: absolute; top: 0; right: 0; width: 20px; height: 15px; z-index: 1; border: 1px solid red; /* for visualization only */ pointer-events:initial; } .overflow:hover:after{ cursor: pointer; } .tooltip { /* visibility: hidden; */ display: none; position: absolute; top: 10; left: 0; background-color: #fff; padding: 10px; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.5s ease; } .overflow:hover + .tooltip { /*visibility: visible; */ display: initial; transition: opacity 0.5s ease; opacity: 1; } <div> <span class="wrap"> <span class="overflow" style="float: left; width: 50px">Long text that might overflow</span> <span class='tooltip'>Long text that might overflow.</span> </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis. </div>

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

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

您可以用另一个跨度包围这个跨度，然后简单地测试原始/内跨度的宽度是否大于新/外跨度的宽度。注意，我说可能——这大致是基于我的情况，我在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());
            }
        }
    });
}

上面的解决方案对我都没用，但我想出了一个很棒的解决方案。人们犯的最大错误是在页面加载时在元素上声明所有3个CSS属性。你必须动态添加这些样式+工具提示当且仅当你想要一个椭圆的跨度比它的父宽。

    $('table').each(function(){
        var content = $(this).find('span').text();
        var span = $(this).find('span');
        var td = $(this).find('td');
        var styles = {
            'text-overflow':'ellipsis',
            'white-space':'nowrap',
            'overflow':'hidden',
            'display':'block',
            'width': 'auto'
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: 'hover',
                html: true,
                title: content,
                placement: 'bottom'
            });
        }
    });