5

我正在使用 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 上的截断仅适用于某种工作）。

我希望工具提示出现在被截断的文本上。如何检测文本是否被截断以便显示工具提示？

4

2 回答 2

19

这个问题很老，得到了回答。

但是，要应用@aSeptik 给出的解决方案，您需要提前知道有多少字符适合容器，或者使用 jQuery 插件。

我遇到了同样的问题，今天的解决方案很简单：使用clientWithandscrollWidth属性。

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

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

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

于 2014-11-26T17:26:41.270 回答
1

请记住，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();
于 2010-05-29T16:13:06.500 回答