如何通过JS确定是否在我的样式中应用了截断？

Question

我正在使用CSS样式应用截断:

.yui-skin-sam td:not(.yui-dt-editable) .yui-dt-liner{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');     
}

.yui-skin-sam td[class~=yui-dt-editable] .yui-dt-liner{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
}

(旁注:我不确定这是否是编写我的CSS的最佳方式.这是一个特定于Firefox的解决方法,因为在Firefox上截断只能进行排序).

我想要一个工具提示出现在被截断的文本上.如何检测文本是否被截断以便我可以显示工具提示？

Answer 1

这个问题很老了,得到了回答.

但是,要应用@aSeptik提供的解决方案,您需要事先知道容器中有多少个字符,或者使用jQuery插件.

我到了同样的问题,今天解决方案非常简单:使用clientWith和scrollWidth属性.

如果,内容将被截断elem.scrollWidth > elem.clientWidth.

以下是MDN文档:https://developer.mozilla.org/en-US/docs/Web/API/element.scrollWidth

以及jsFiddle中的一个例子:http://jsfiddle.net/diegof79/de9xsn4b/

Answer 2

请记住，CSS 永远不会改变 DOM！

jQuery 片段：

$(function() {
    $('a.link').each(function(e) {
        var link = $(this).text();
        if ( link.length > 100) {
            $(this).attr('title', link );
        }
    });
});

假设您有链接

<a class="link" href="" >the brown fox jumps over the lazy dog</a>

上面的代码将产生

    <a class="link" href="" title="the brown fox jumps over the lazy dog" >
     the brown fox jumps over the lazy dog
    </a>

如您所知，酒店text-overflow: ellipsis;将完成剩下的工作！

继续前进：

这里有一个小插件

我希望能够在所有浏览器中使用此功能，因此我编写了一个小型 jQuery 插件以支持 Firefox。使用时，只需在 jQuery 对象上调用 ellipsis() 即可。例如：

$("span").ellipsis();

• http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery