js ellipsis

by sthag

HTML

<table>
   <tr><td>
       <div class="ellipsis multiline" >Loremㅇㅇㅇㅇㅇㅇㅇㅇ ipsum dolor sit amet, consecteturesssee adipisicing elit Lorem ipsum ㅇㅇdoㅇㅇㅇㅇㅇㅇㅇㅇlor sit amet, consectetur adipisicing elit</div></td>
       <td>
           <div class="ellipsis multiline" >Loremssssssssssssssssssssssssssssssssssssssssssssssssssssssssss ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit</div></td></tr>
    </table>

CSS

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
}

.ellipsis.multiline {
        white-space: normal;
        height : 40px;
}
table{
    table-layout:fixed;
    width : 100%;
    border : 1px solid #ccc;

}
td{
    width : 50%;
    border-right : 1px solid #ccc;
    word-wrap : break-word;
}
}

JavaScript

(function($) {
$.fn.ellipsis = function()
{
    return this.each(function()
    {
    var el = $(this);

        if(el.css("overflow") == "hidden")
        {
        var text = el.html();
        var multiline = el.hasClass('multiline');
        var t = $(this.cloneNode(true))
                .hide()
                .css('position', 'absolute')
                .css('overflow', 'visible')
                .width(multiline ? el.width() : 'auto')
                .height(multiline ? 'auto' : el.height());

el.after(t);

function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };

var func = multiline ? height : width;

while (text.length > 0 && func())
{
        text = text.substr(0, text.length - 1);
        t.html(text + "...");
}

el.html(t.html());
t.remove();
            }
        });
};
})(jQuery);

$(document).ready(function()
{
    $(".ellipsis").ellipsis();                  
});