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

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

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

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

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());
});

下面是另外两个纯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>

这是我的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

这就是我最终基于https://stackoverflow.com/a/13259660/1714951所做的，并在元素不再溢出时添加title属性的删除。这是纯JS (ES6)，使用事件委托的性能(当使用几个元素与同一类)和保护子句的可读性:

// You may want to change document by an element closer to your target
// so that the handler is not executed as much
document.addEventListener( 'mouseenter', event => {
    let eventTarget = event.target;
    // This could be easily applied to text-truncate instead of my-class if you use bootstrap
    if ( !eventTarget.classList?.contains( 'my-class' ) ) {
        return;
    }
    if ( eventTarget.offsetWidth < eventTarget.scrollWidth ) {
        eventTarget.setAttribute( 'title', eventTarget.innerText );
        return;
    }
    eventTarget.removeAttribute( 'title' );
}, true );