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 (
…
)
Usage
Editable demo (CodePen)
HTML:
<div class="line-clamp">
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.
</div>
CSS:
.line-clamp {
width: 100px;
line-height: 20px;
}
JavaScript:
const element = document.querySelector('.line-clamp')
lineClamp(element, 3)
Boom:
<div class="line-clamp" style="overflow: hidden; overflow-wrap: break-word; word-wrap: break-word;">
Lorem ipsum dolor sit amet, <strong>consectetur…</strong>
</div>
Limitations
API
const lineClamp = require('line-clamp')
lineClamp(element, lineCount [, options])
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.
Installation
$ yarn add line-clamp
Prior art
License
MIT