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

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;プロパティは残りを行います！

前進する：

ここに小さなプラグインがあります

この機能をすべてのブラウザーで使用できるようにしたかったので、Firefox をサポートするために小さな jQuery プラグインを作成しました。使用するには、jQuery オブジェクトで ellipsis() を呼び出すだけです。例えば：

$("span").ellipsis();
于 2010-05-29T16:13:06.500 に答える