:clamp: Line clamp a DOM element in vanilla JavaScript
Line clamp a DOM element in vanilla JavaScript
-webkit-line-clamp
…
)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>
window.getComputedStyle
.const lineClamp = require('line-clamp')
Returns true
if text was truncated, else returns false
.
options
is an optional configuration object.
options.ellipsis
to change the string to be appended to the truncated text. Defaults to …
.See Usage.
$ yarn add line-clamp