how to get row even with ellipsis

Question

How can I make each thumbnail even with the next and so on and the text/title go into ellipsis after each reaches the max. width/height of the row/column. Here is the site and here is the code that needs transformation.

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

dev · Answer 1 · 2013-03-17T23:37:11.010

As you're trying to ellipsis multiple lines (in this case 2) I've found in the past that the text-overflow does not work, and this only works for single lined text.

I've used the DotDotDot jQuery plugin very handy and easy to use for this situation.

In your case I see that your multiple lines are as anchor tags so you would set a fixed width and height with CSS to your visible area like so..

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

and with JS as a very basic example it would be...

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

Please see this basic working fiddle.

Sorry I couldn't find a linked JS file so I had to include the plugin in the fiddle... the actual code is at the bottom.

score 0 · Answer 2 · answered Mar 17 '13 at 23:10

0

Add white-space: nowrap to the div style

Example

answered Mar 17 '13 at 23:10

gpasci

1,420
11
16

score 0 · Answer 3 · answered Mar 17 '13 at 23:32

0

You can do that with CSS, albeit only with the newer browsers:

text-overflow: ellipsis

http://davidwalsh.name/css-ellipsis

answered Mar 17 '13 at 23:32

DA.

39,848
49
150
213

how to get row even with ellipsis

3 Answers3