Shave

Shave is a zero dependency javascript plugin that truncates text to fit within a 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 in tact! Shave truncates multi-line text in the most simple, lightweight and uncomplicated way possible.

Shave, compared to other truncation plugins:

• maintains the original text after truncation.
• does not require other libraries
• only requires a selector and a max height
• is very lightweight - ~1.5kb unminified
• allows for custom ellipsis strings and class names but doesn't over complicate what's needed to truncated text within a html element.

Installing from a package manager

npm

npm i shave --save-dev

bower

bower i shave --save-dev

Usage

1. Add dist/shave.js.
2. shave text within the element you'd like to.

Syntax

basic setup

shave('selector', maxheight);

Shave also provided 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:

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

Examples

Codepen example with plain javascript.

Codepen example with jQuery.

Notes

text-overflow: ellipsis is the way to go when truncating text to a single line. Shave does something very similar but for multiple lines.