javascript - 省略記号でも行を取得する方法

Question

各サムネイルを次のサムネイルなどと同じにする方法と、それぞれが最大に達した後にテキスト/タイトルが省略記号に入る方法を教えてください。行/列の幅/高さ。これがサイトで、変換が必要なコードは次のとおりです。

    <script>
$(document).ready(function(){
    $("button").click(function(){
        $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>");
        var dataContainer = $("#data ul");
        $.ajax({
            url:'http://gdata.youtube.com/feeds/api/users/sony/uploads?alt=jsonc&v=2&callback=?',
            dataType: "jsonp",
            timeout: 5000,
            success: function(data){

                     $.each(data.data.items, 
                               function(i, val) {

                                 if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {
                                    dataContainer.append('<div style="float:left;width:150px;height:150px;overflow:none;text-overflow:ellipsis"><a href='+val.player["default"]+' target="_blank">'+val.title+'</a><br /><img src="'+val.thumbnail.sqDefault+'" width="120" height="90" alt="'+val.title+'"/><br />Views '+val.viewCount+'</div>');
                                 }
                         });
                    }
                });
            });
});
</script>

Answer 1

複数の行 (この場合は 2) を省略しようとしているので、過去に がtext-overflow機能しないことがわかりました。これは単一行のテキストに対してのみ機能します。

この状況では、非常に便利で使いやすいDotDotDot jQuery プラグインを使用しました。

あなたの場合、複数の行がアンカータグとして表示されていることがわかります.CSSで固定幅と高さを可視領域に設定します..

a {width:150px; height:40px;}

非常に基本的な例としてJSを使用すると、次のようになります...

$("a").dotdotdot({ellipsis:'...'});

この基本的な作業フィドルを参照してください。

申し訳ありませんが、リンクされた JS ファイルが見つからなかったため、フィドルにプラグインを含める必要がありました...実際のコードは一番下にあります。

Answer 2

新しいブラウザーのみではありますが、CSS を使用してそれを行うことができます。

text-overflow: ellipsis

http://davidwalsh.name/css-ellipsis

Answer 3

white-space: nowrapdiv スタイルに追加する

例