<span> element following the visible text. This means the original text remains intact!
Shave, compared to other truncation plugins:
npm install shave --save
bower install shave --save
yarn add shave
Add dist/shave.js to your html
Or as a module
import shave from 'shave';
Shave also provided options only to overwrite what it uses.
If you'd like have custom class names and not use
Or if you'd like to have custom characters (instead of the standard ellipsis):
And here's a jQuery/Zepto example with custom options:
If you're using a non-spaced language, you can support shave by setting an option
Codepen example with jQuery.
Codepen example with a non-spaced language.
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. 🍻