https://github.com/zhengrenzhe/shear.js
✂️truncate text across DOM nodes
https://github.com/zhengrenzhe/shear.js
ellipsis javascript multi-line truncate typescript
Last synced: 5 months ago
JSON representation
✂️truncate text across DOM nodes
- Host: GitHub
- URL: https://github.com/zhengrenzhe/shear.js
- Owner: zhengrenzhe
- License: mit
- Created: 2017-12-20T15:18:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:36:26.000Z (almost 3 years ago)
- Last Synced: 2025-08-09T15:56:38.965Z (10 months ago)
- Topics: ellipsis, javascript, multi-line, truncate, typescript
- Language: TypeScript
- Homepage: https://codepen.io/droiz/full/YYWBBw
- Size: 498 KB
- Stars: 61
- Watchers: 1
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
shear.js
**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
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](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)