KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

shear.js

★ 61 Open GitHub ↗

✂️truncate text across DOM nodes

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>shear.js</h1>

**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

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|                                                                                                 IE9+ / Edge15+                                                                                                  |                                                                                                        16+                                                                                                        |                                                                                                      16+                                                                                                      |                                                                                                    15+                                                                                                    |                                                                                                      6+                                                                                                       |

## Install

```
yarn add shear.js
```

```
<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](https://codepen.io/droiz/full/YYWBBw)

shear.js

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README