Advanced Search

Return to Snippet

Revision: 23087
at January 29, 2010 16:25 by adamcoulombe
Initial Code 
<!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>

<style type="text/css">
	/*some example styling... you can remove this*/
	body{ font:22px Arial, Helvetica, sans-serif;}
	#myParagraphs{width:700px; padding:28px; background-color:#99CCFF; }
</style>
	
</head>

<body>
<div id="myParagraphs">

<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>
Initial URL 
http://www.adamcoulombe.info/lab/jquery/width-truncate/
Initial Description 
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.
Initial Title 
jQuery Plugin to Truncate text based on width
Initial Tags 
javascript, plugin, xhtml, jquery
Initial Language 
jQuery