Posted By

JoshChris on 07/11/13

Tagged

jquery
text

Versions (?)

Last Edited at 07/11/13 02:13am

Statistics

Viewed 1027 times

Favorited by 0 user(s)

Related snippets

Multiline Text Overflow

/ Published in: jQuery

Simple function to include in your script to enable multi-line text-overflow.
See the jsfiddle (http://jsfiddle.net/eAyyL/) for details on the necessary CSS and HTML layout.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

function multiline_text_overflow(elem) {
	$(elem).each(function(i){
		$(this).text($(this).data("originalText"));
		$(this).data("originalText", $(this).text()).wrapInner("<span class='mlto'></span>");
		var p=$(this).find(".mlto");
		var divh = $(this).height();
		while($(p).outerHeight()>divh) {
		    $(p).text(function (index, text) {
		        return text.replace(/\W*\s(\S)*$/, '...');
		    });
		}
	})
}
 
//example
$(document).ready(function () {
	multiline_text_overflow($(".news_item"));
 
	$(window).on("orientationchange resize", function() {
		multiline_text_overflow($(".news_item"));
	});
});