Advanced Search

Return to Snippet

Revision: 64166
at June 12, 2014 02:37 by JoshChris
Updated Code 
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"));
	});
});

Revision: 64165
at July 11, 2013 02:13 by JoshChris
Initial Code 
function multiline_text_overflow(elem) {
	$(elem).each(function(i){
		$(this).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)*$/, '...');
		    });
		}
	})
}

//usage
//multiline_text_overflow(".news_item");
Initial URL 
http://jsfiddle.net/eAyyL/
Initial Description 
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.
Initial Title 
Multiline Text Overflow
Initial Tags 
jquery, text
Initial Language 
jQuery