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: 30 days 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 (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2021-01-30T07:40:41.000Z (about 4 years ago)
• Last Synced: 2025-01-16T20:57:24.619Z (about 1 month 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 [![npm Version](https://badgen.net/npm/v/line-clamp)](https://www.npmjs.org/package/line-clamp) [![Build Status](https://badgen.net/travis/yuanqing/line-clamp?label=build)](https://travis-ci.org/yuanqing/line-clamp) [![Bundle Size](https://badgen.net/bundlephobia/minzip/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)