jQuery Plugin to Truncate text based on width


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.