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.
- supports non-spaced languages (Non-ascii)
Installing from a package manager
NPM
npm i shave --save-devBower
bower i shave --save-devSetup
Add dist/shave.js or, dist/jquery.shave.js for jQuery/Zepto as of Shave >= v2.
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,