README
js-snipjs-snip
Universal JavaScript library for clamping HTML text elements.
Key features:Key features:
- two snipping approaches (CSS / JavaScript)
- no need to specify line heights
- re-snipping on element resize
- no dependencies
To get a hands-on experience try the Interactive Demo.
InstallationInstallation
# install with npm npm install js-snip # or with yarn yarn add js-snip
UsageUsage
import { snip, unsnip } from 'js-snip' const options = { // your options } // snipping an element snip(element, options) // unsnipping the element unsnip(element)
OptionsOptions
export interface SnipOptions { method?: 'css' | 'js' lines?: number ellipsis?: string midWord?: boolean }
How it worksHow it works
- CSS approach is based on the
-webkit-line-clamp.
- JavaScript approach is based on the progressive cutting of the element's
textContentin a loop.
Note: CSS approach is faster (preferred), but does not work in older browsers / in all situations (f.e. does not work in IE11, when you need the text to flow around a floated element, or when you want a custom ellipsis).
CaveatsCaveats
For the library.
Change LogChange Log
All changes are documented in the change log.