shear.js

npm

**shear.js** is a zero dependency javascript plugin, It uses [Selection API](https://developer.mozilla.org/zh-CN/docs/Web/API/Selection) to truncate multiple lines of text based on the actual visual content, and return the original and truncated content. ## Features - **the target element need not be set as a block level element** - **truncate across dom nodes within the target element, keep the original dom node within the target element** - **insert the html string at the end of the truncation** - zero dependency - very lightweight (1.9kb) ## Browser Support | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | IE9+ / Edge15+ | 16+ | 16+ | 15+ | 6+ | ## Install ``` yarn add shear.js ``` or ``` ``` ## Usage ``` import shear from "shear.js"; ``` display three lines ``` shear(document.getElementById('target'), 3); ``` display three lines, add html string at the end of the DOM ``` shear(document.getElementById('target'), 3, '...(More)'); ``` ## Example [Codepen](https://codepen.io/droiz/full/YYWBBw)