Skip to content

Instantly share code, notes, and snippets.

@cscheng
Created April 7, 2011 07:39
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save cscheng/907237 to your computer and use it in GitHub Desktop.
Save cscheng/907237 to your computer and use it in GitHub Desktop.
A simple jQuery plugin to truncate a piece of text to a predefined amount of lines. It assumes pixel values of both the container and its line-height. Useful when you have multiple boxes with text in your design that require equal heights.
$.fn.truncateLines = function(options) {
options = $.extend($.fn.truncateLines.defaults, options);
return this.each(function(index, container) {
container = $(container);
var containerLineHeight = Math.ceil(parseFloat(container.css('line-height')));
var maxHeight = options.lines * containerLineHeight;
var truncated = false;
var truncatedText = $.trim(container.text());
var overflowRatio = container.height() / maxHeight;
if (overflowRatio > 2) {
truncatedText = truncatedText.substr(0, parseInt(truncatedText.length / (overflowRatio - 1), 10) + 1); // slice string based on how much text is overflowing
container.text(truncatedText);
truncated = true;
}
var oldTruncatedText; // verify that the text has been truncated, otherwise you'll get an endless loop
while (container.height() > maxHeight && oldTruncatedText != truncatedText) {
oldTruncatedText = truncatedText;
truncatedText = truncatedText.replace(/\s.[^\s]*\s?$/, ''); // remove last word
container.text(truncatedText);
truncated = true;
}
if (truncated) {
truncatedText = options.ellipsis ? truncatedText + ' ' + options.ellipsis : truncatedText;
container.text(truncatedText);
if (container.height() > maxHeight) {
truncatedText = truncatedText.replace(/\s.[^\s]*\s?...$/, ''); // remove last word and ellipsis
truncatedText = options.ellipsis ? truncatedText + ' ' + options.ellipsis : truncatedText;
container.text(truncatedText);
}
}
});
};
$.fn.truncateLines.defaults = {
lines: 8,
ellipsis: '...'
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment