shear.js

shear.js is a zero dependency javascript plugin, It uses Selection API 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	Firefox	Chrome	Opera	Safari
IE9+ / Edge15+	16+	16+	15+	6+

Install

yarn add shear.js

or

<script src="https://rawgit.com/zhengrenzhe/shear.js/master/dist/shear.js"></script>

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, '<span>...(More)</span>');

Example

Codepen