multiline ellipsis

search for: in: entire forum this post
you are here: root => Tech Tutorials => multiline ellipsis
member since:
folders:
3
posts:
7
replies:
1

multiline ellipsis

CSS now has ellipsis support (...) for long text but this only works for 1 line text. I have made this function which puts the ellipsis at the end of your text no matter how many lines it it:

code:
/*this JS code puts the ellipsis (...) at the end of multiline ellipsis elements
 *
 * to use the multiline ellipsis on an element give it the following CSS properties
 * line-height:xxx
 * height:xxx (must line-height * number of wanted lines)
 * overflow:hidden
 *
 * and have the class js_ellipsis
 * */

//do all ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});

//redo ellipsis when window resizes
var re_ellipsis_timeout;
jQuery( window ).resize(function() {
	//timeout mechanism prevents from chain calling the function on resize
	clearTimeout(re_ellipsis_timeout);
	re_ellipsis_timeout = setTimeout(function(){ console.log("re_ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});

//the main function
function put_ellipsisses(){
	jQuery(".js_ellipsis").each(function(){

		//remember initial text to be able to regrow when space increases
		var object_data=jQuery(this).data();
		if(typeof object_data.oldtext != "undefined"){
			jQuery(this).text(object_data.oldtext);
		}else{
			object_data.oldtext = jQuery(this).text();
			jQuery(this).data(object_data);
		}

		//truncate and ellipsis
		var clientHeight = this.clientHeight;
		var maxturns=100; var countturns=0;
		while (this.scrollHeight > clientHeight && countturns < maxturns) {
			countturns++;
			jQuery(this).text(function (index, text) {
		        return text.replace(/\W*\s(\S)*$/, '...');
		    });
		}
	});
}

post #55
permalink
member since:
folders:
0
posts:
0
replies:
1
CSS with Ellipsis, It is really great having this kind of solution. I am thankful to you so much. I was looking for this solution for many days. I also posted my question here but it didn’t get any essaydune essay service review . Finally, you have given me the final and proper solution.
post #209
permalink

moderators of this post

envis (level: ∞)
powered by Nodesforum