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

John Avis by | July 6, 2011 | Jquery/Javascript

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.
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.

Related Posts

Jquery/Javascript Responsive Web Design

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | November 16, 2017

I have made another change to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript

Back to top button like Facebook app

by John Avis | September 15, 2017

The Facebook app on Windows phone has a nice and unobtrusive back to top button that only appears once you scroll past a certain point, and only when you start scrolling up the page. This code offers similar functionality using jQuery.


Jquery/Javascript Responsive Web Design

Enhanced simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | April 13, 2017

In response to a request, I have made some improvements to the modified version of Mediademon's Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.

Comments

by Ken | November 7, 2011

Thanks, works perfectly!

Reply

Paolo Brocco

by Paolo Brocco | August 7, 2014

So far this is the best solution for an annoying problem with several plugins, scripts (I tried clamp and it didn't work) or dirty hacks around, THANK YOU!

In my implementation instead of "..." I use '…' (ellipsis, unicode 8230).

Reply

Blah

by Blah | March 3, 2015

Heaven forbid we get provided a legitimate example of it being used.

Reply

John Avis

by John Avis | March 4, 2015

Thanks for your feedback, Blah. I have added an example.

Reply

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.