如何确定是否通过JS以我的样式应用了截断? [英] How do I determine if truncation is being applied in my style through JS?

问题描述

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

I am applying truncation using CSS styles:

.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上截断仅能正常工作).

(Sidenote: I'm not sure if this is the best way to write my CSS. This is a Firefox specific workaround since truncation on Firefox only sort-of works).

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

I want a tool-tip to appear over text that is truncated. How do I detect if text is truncated so that I can display a tool-tip?

推荐答案

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

Keep in mind that CSS never alter the 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;属性将完成其余工作！

the text-overflow: ellipsis; property will do the rest as you know!

前进:

这里有一个小插件

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

$("span").ellipsis();

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

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

这篇关于如何确定是否通过JS以我的样式应用了截断?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！