Posted By

adamcoulombe on 01/29/10


Tagged

javascript width plugin xhtml jquery dhtml truncate


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jearley


jQuery Plugin to Truncate text based on width


 / Published in: jQuery
 

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

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Truncate by Width Plugin</title>
  6. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.  
  9. //////////////////////////// this part is the plugin, copy into a seperate document if you wish ////////////////////////////////
  10. (function($){
  11. $.fn.extend({
  12.  
  13. widthTruncate: function(options) {
  14. var defaults = {
  15. width: 'auto',
  16. after: '...'
  17. };
  18.  
  19. var options = $.extend(defaults, options);
  20.  
  21. return this.each(function() {
  22. if(options.width=='auto'){ truncateWidth=$(this).width()-8; }else{ truncateWidth = options.width}
  23. if($(this).width()>truncateWidth){
  24. var smaller_text = $(this).text();
  25. $(this).html('<span id="truncateWrapper" style="display:inline;">'+options.after+'</div>');
  26. i=1;
  27. while ($('#truncateWrapper').width() < truncateWidth) {
  28. $('#truncateWrapper').html(smaller_text.substr(0, i) + options.after);
  29. i++;
  30. }
  31. $(this).html($('#truncateWrapper').html());
  32. }
  33.  
  34. });
  35.  
  36. }
  37.  
  38. });
  39. })(jQuery);
  40. //////////////////////////// end plugin ////////////////////////////////
  41.  
  42. //////////////////////////// initiate the plugin ////////////////////////////////
  43. $(document).ready(function(){
  44. $('.autoTruncate').widthTruncate(); //by default, it will truncate to its initial width
  45. $('.truncateMe').widthTruncate({width:400}); // you can override by passing in your own width
  46. });
  47. </script>
  48.  
  49. <style type="text/css">
  50. /*some example styling... you can remove this*/
  51. body{ font:22px Arial, Helvetica, sans-serif;}
  52. #myParagraphs{width:700px; padding:28px; background-color:#99CCFF; }
  53. </style>
  54.  
  55. </head>
  56.  
  57. <body>
  58. <div id="myParagraphs">
  59.  
  60. <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>
  61.  
  62. <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>
  63.  
  64. </div>
  65.  
  66. </body>
  67. </html>

Report this snippet  

You need to login to post a comment.