Jquery/Javascript plugin to truncate text to fit container height and width

I recently needed a Javascript function to truncate text to fit a container such as a DIV, not just in width but in height. I found plenty of functions that truncate to width but couldn't find anything by height so I created this Jquery plugin that does the job. Please note that it does not handle HTML so if HTML content is truncated it may truncate mid-tag and break the display.

To use the function use one the the following syntax:

$("#id").truncate();

Truncates to size of container and adds "..." if the text requires truncation.

$("#id").truncate(" <a href='#'>read more</a>");

Truncates to size of container and adds specified text (in this example a read more link) if the text requires truncation.

Click here for an example

Your container should have a fixed height and overflow set to hidden. You will obviously also need to include the jQuery library.

(function ($) {
       $.fn.truncate = function (options) {
              if (!options) options = "...";
              return this.each(function (num) {
                     var height = parseInt($(this).css("height"));
                     var content = $(this).html();
                     while (this.scrollHeight > height) {
                           content = content.replace(/s+S*$/, "");
                           $(this).html(content + options.more);
                     }
              })
       }
})(jQuery);

If you only want to truncate a string to a single line, and want a server-side solution, then I recommend you read the Code Project article Truncating a text string in ASP.NET to fit within a given pixel width.