Add ellipsis after the multiple line

Basically ellipsis are used in mostly places like in the long paragraph or article. CSS3 only provides add ellipsis in single line end, but Today I create a jQuery for add ellipsis after the multiple lines.

For e.g. We have a paragraph of multiple line and want to show first three line only, than add ellipsis –

ellipsis

HTML structure

 <div class="add-ellipsis lines">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit dssfsdfs dgsgdf Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit dssfsdfs dgsgdf Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo sapien tincidunt, vehicula neque sit dssfsdfs dgsgdf Lorem ipsum dolor sit amet, consectetur adipiscing.
</div>

CSS –

.add-ellipsis{font: 16px/20px Consolas, sans-serif; height: 60px; overflow: hidden;}

height = line-height * 3 // multiply by 3 because we want to display only 3 line

Now, create jQuery elip() –

$.fn.elip = function(){
  return this.each(function(){
     var thisTag = $(this);
     if(thisTag.css("overflow") == "hidden"){
	var text = thisTag.html();
	var lines = thisTag.hasClass('lines');
	var copy = $(this.cloneNode(true))
        .hide()
	.css('position', 'absolute')
	.css('overflow', 'visible')
	.width(lines ? thisTag.width() : 'auto')
	.height(lines ? 'auto' : thisTag.height());
	thisTag.after(copy);
	function height() {return copy.height() > thisTag.height();};
	function width() {return copy.width() > thisTag.width();};
	var finaly = lines ? height : width;
	while (text.length > 0 && finaly()){
           text = text.substr(0, text.length - 1);
	   copy.html(text + "...");
	   }
	thisTag.html(copy.html());
	copy.remove();
	}
    });
};

Call elip() –

$(window).load(function(){
   $(".add-ellipsis").elip();
});

Add Comment

Required fields are marked *. Your email address will not be published.