Posted By

adamcoulombe on 01/29/10

Tagged

Versions (?)

Last Edited at 01/29/10 04:25pm

Statistics

Viewed 896 times

Favorited by 0 user(s)

Related snippets

jQuery Plugin to Truncate text based on width

/ Published in: jQuery

This plugin will, by default, truncate a block of text down to one line at its current width (if the text block exceeds 1 line). You can also pass in a pixel value and it will truncate it to that width.

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Truncate by Width Plugin</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">

//////////////////////////// this part is the plugin, copy into a seperate document if you wish ////////////////////////////////
(function($){
 $.fn.extend({
 
 	widthTruncate: function(options) {
		var defaults = {
			width: 'auto',
			after: '...'
		};
		
	  var options = $.extend(defaults, options);
	  
	  return this.each(function() {
	  if(options.width=='auto'){ truncateWidth=$(this).width()-8; }else{ truncateWidth = options.width}
			 if($(this).width()>truncateWidth){		 
			 var smaller_text = $(this).text();
			 $(this).html('<span id="truncateWrapper" style="display:inline;">'+options.after+'</div>');
			 		i=1;
			         while ($('#truncateWrapper').width() < truncateWidth) {
						$('#truncateWrapper').html(smaller_text.substr(0, i) + options.after);
						i++;
					}
					$(this).html($('#truncateWrapper').html());
			}
		
	  });
	  
	}

});
})(jQuery);
//////////////////////////// end plugin ////////////////////////////////

//////////////////////////// initiate the plugin ////////////////////////////////
$(document).ready(function(){
	$('.autoTruncate').widthTruncate(); //by default, it will truncate to its initial width
	$('.truncateMe').widthTruncate({width:400}); // you can override by passing in your own width
});
</script>

<p class="autoTruncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

<p class="truncateMe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit augue, malesuada vel sollicitudin a, molestie quis nibh. Suspendisse elementum facilisis neque, ut aliquet tellus sollicitudin ut. Fusce aliquam est ut lorem egestas a consectetur justo malesuada. Sed eleifend volutpat orci in mattis. Duis porttitor nisi in sem rutrum vehicula. In sodales lobortis rutrum. Integer eget metus enim, et accumsan justo. Sed vehicula molestie leo eu scelerisque.</p>

</div>

</body>
</html>

URL: http://www.adamcoulombe.info/lab/jquery/width-truncate/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.