Shave

Shave text for smooth looking content within a specified space.

Shave is a javascript text truncation plugin that doesn't get in the way. It is an alternative to text-overflow: ellipsis; in that it will truncate multi-line text.

Setup

npm i shave --save-dev
# or
bower i shave --save-dev

Run

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

Basic Examples

shave('#foo', maxheight); // Shave a single element
shave('.bar', maxheight); // Shave multiple elements
shave('selector:not([not this selector])', maxheight); // Complex selectors
shave('selector', maxheight, { character: '🍻' }); // Different character instead of an ellipsis
shave('selector', maxheight, { classname: 'your-css-class' }); // Adds a custom class name
$('selector').shave(maxheight, options); // Or with jQuery
$('selector').shave(maxheight, { classname: 'your-css-class' }); // Or with jQuery & options

How?

Shave.js shaves an element's text string to the last full word that can fit within a specified max height.

Why?

Shave.js is made for simplicity; it doesn't try to over solve truncation or provide tons of options. It truncates text to a specified max height.

What about the original text?

Shave.js re-adds the diff of the original selected element's text in a hidden <span>. It runs a check for that <span> to make sure text is shaved properly every time.

What about size?

Shave.js is small - ~1.5kb unminified and is meant to do 1 thing - shave text to fit beautifully to a specified max height.

How can I use it?

You can use Shave.js in all modern formats and as a jQuery or Zepto plugin.

Examples

codepen example with plain javascript.

Codepen example with jQuery.