Shave, a javascript plugin for smooth looking content within a specified space

A modern javascript plugin for truncating text within an html element.

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 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 compared to other truncation plugins:

  1. maintains the original text after truncation
  2. does not require other libraries
  3. only requires a selector and a max height
  4. is very lightweight - ~1.5kb unminified
  5. allows for custom ellipsis strings and class names but doesn't over complicate
  6. is fast and capable of truncating text within lots of elements quickly
  7. 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

Setup

Add dist/shave.js.

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:

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

Examples

Codepen, plain javascript.

Codepen, jQuery or Zepto.

Shave is faster 🚀 when compared to Ellipsis.js, jQuery.Trunk8.js or jQuery.DotDotDot.js; plus, zero dependencies. 💪