https://github.com/yuanqing/line-clamp
:clamp: Line clamp a DOM element in vanilla JavaScript
https://github.com/yuanqing/line-clamp
ellipsis javascript line-clamp truncate
Last synced: 11 months ago
JSON representation
:clamp: Line clamp a DOM element in vanilla JavaScript
- Host: GitHub
- URL: https://github.com/yuanqing/line-clamp
- Owner: yuanqing
- License: mit
- Created: 2016-03-13T01:11:46.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2021-01-30T07:40:41.000Z (over 5 years ago)
- Last Synced: 2025-01-16T20:57:24.619Z (over 1 year ago)
- Topics: ellipsis, javascript, line-clamp, truncate
- Language: JavaScript
- Homepage: https://codepen.io/lyuanqing/pen/VQQVry
- Size: 200 KB
- Stars: 77
- Watchers: 2
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# line-clamp [](https://www.npmjs.org/package/line-clamp) [](https://travis-ci.org/yuanqing/line-clamp) [](https://bundlephobia.com/result?p=line-clamp)
> Line clamp a DOM element in vanilla JavaScript
- Truncates in pure JavaScript; does *not* rely on [`-webkit-line-clamp`](https://css-tricks.com/line-clampin/)
- Works even if the given element contains nested DOM nodes
- Supports appending a custom string instead of an ellipsis (`…`)
## Usage
> [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/VQQVry)
HTML:
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
CSS:
```css
.line-clamp {
width: 100px;
line-height: 20px;
}
```
JavaScript:
```js
const element = document.querySelector('.line-clamp')
lineClamp(element, 3)
```
Boom:
```html
Lorem ipsum dolor sit amet, consectetur…
```
### Limitations
- The element is assumed to have a pixel line-height, obtained via [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle).
## API
```js
const lineClamp = require('line-clamp')
```
### lineClamp(element, lineCount [, options])
Returns `true` if text was truncated, else returns `false`.
`options` is an optional configuration object.
- Set `options.ellipsis` to change the string to be appended to the truncated text. Defaults to `…`.
See [Usage](#usage).
## Installation
```sh
$ yarn add line-clamp
```
## Prior art
- [Clamp.js](https://github.com/josephschmitt/Clamp.js)
- [FTEllipsis](https://github.com/ftlabs/ftellipsis)
- [Shave](https://github.com/dollarshaveclub/shave)
## License
[MIT](LICENSE.md)