shave

Shave

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:

• 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 install shave --save-dev

bower

bower install shave --save-dev

Usage

Add dist/shave.js.

Syntax

Basic setup

shave('selector', maxheight);

Shave also provided options only to overwrite what it uses.

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.

Shave is meant to truncate text within a selected html element. This means it will overwrite html within an html element with just the text within the selected element.

Shave works in all modern browsers and was tested in some not so modern browsers (like Internet Explorer 8) - it works there too. 🍻