Truncate Text ✁

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!


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.


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

$('selector').shave(maxheight, { classname: 'your-css-class', character: '✁' });


Codepen, plain javascript.

Codepen, jQuery or Zepto.

Previous Post
Next Post