Shave

Shave is a zero dependency javascript plugin that truncates multi-line 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, 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.
• is fast and capable of truncating text within lots of elements quickly.
• is additive. It will play nice with other javascript libraries and more truncation features can easily be built with it.

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.

Shave implements a binary search to truncate text in the most optimal way possible.

Browser support notes will be added soon. 🍻