Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height. It then stores the diff of the original text string in a hidden <span> element following the visible text. This means the original text remains intact!

Add dist/shave.js or, dist/jquery.shave.js for jQuery/Zepto as of Shave >= v2.

Usage

shave('selector', maxheight);

Shave also provides options only to overwrite what it uses.

So if you'd like have custom class names and not use .js-shave :

shave('selector', maxheight, {classname: 'classname'});

Or if you'd like to have custom characters (instead of the standard ellipsis):

shave('selector', maxheight, {character: '✁'});

Or both:

shave('selector', maxheight, {classname: 'classname', character: '✁' });

You can also use shave as a jQuery or Zepto plugin.

$('selector').shave(maxheight);

And here's a jQuery/Zepto example with custom options: