1

我怎样才能使每个缩略图即使是下一个等等，并且在每个达到最大值后文本/标题都会变成省略号。行/列的宽度/高度。这是站点，这是需要转换的代码。

    <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>
4

3 回答 3

1

当您尝试省略多行时（在本例中为 2），我过去发现text-overflow它不起作用，这仅适用于单行文本。

在这种情况下，我使用了非常方便且易于使用的DotDotDot jQuery 插件。

在您的情况下，我看到您的多行作为锚标签，因此您可以使用 CSS 为您的可见区域设置固定的宽度和高度，如下所示..

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

并以 JS 作为一个非常基本的例子，它将是......

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

请看这个基本的工作小提琴。

抱歉，我找不到链接的 JS 文件，所以我不得不在小提琴中包含插件......实际代码在底部。

于 2013-03-17T23:30:44.503 回答
0

您可以使用 CSS 来做到这一点，尽管只能使用较新的浏览器：

text-overflow: ellipsis

http://davidwalsh.name/css-省略号

于 2013-03-17T23:32:50.437 回答
0

添加white-space: nowrap到 div 样式

例子

于 2013-03-17T23:10:13.000 回答