Line clamp a DOM element in vanilla JavaScript
npm install line-clamp> Line clamp a DOM element in vanilla JavaScript
- Truncates in pure JavaScript; does not rely on -webkit-line-clamp
- Works even if the given element contains nested DOM nodes
- Supports appending a custom string instead of an ellipsis (…)
HTML:
``html`
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CSS:
`css`
.line-clamp {
width: 100px;
line-height: 20px;
}
JavaScript:
`js`
const element = document.querySelector('.line-clamp')
lineClamp(element, 3)
Boom:
`html`
- The element is assumed to have a pixel line-height, obtained via window.getComputedStyle.
`js`
const lineClamp = require('line-clamp')
Returns true if text was truncated, else returns false.
options is an optional configuration object.
- Set options.ellipsis to change the string to be appended to the truncated text. Defaults to ….
See Usage.
`sh``
$ yarn add line-clamp
- Clamp.js
- FTEllipsis
- Shave