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