https://github.com/laurenashpole/clamps

A lightweight, Vanilla JS fallback for browsers without -webkit-line-clamp support.
https://github.com/laurenashpole/clamps

ellipsis line-clamp truncate

Last synced: 29 days ago
JSON representation

A lightweight, Vanilla JS fallback for browsers without -webkit-line-clamp support.

• Host: GitHub
• URL: https://github.com/laurenashpole/clamps
• Owner: laurenashpole
• License: mit
• Created: 2019-02-11T18:00:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-27T20:27:47.000Z (almost 6 years ago)
• Last Synced: 2024-11-15T23:48:25.441Z (about 2 months ago)
• Topics: ellipsis, line-clamp, truncate
• Language: JavaScript
• Homepage:
• Size: 665 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clamps

[Demo](https://laurenashpole.github.io/clamps/)

There are already a lot of great text truncation options out there (for example, [line-clamp](https://github.com/yuanqing/line-clamp), [Clamp.js](https://github.com/josephschmitt/Clamp.js/), [Shave](https://github.com/dollarshaveclub/shave)) but they are, for the most part, purely JavaScript solutions. In some situations, it would be handier to just have a fallback for the CSS. Web fonts on mobile devices can trip up even the best JS replacement but 90% of mobile browsers support -webkit-line-clamp natively ([source](http://gs.statcounter.com/browser-market-share/mobile/united-states-of-america)). Changing the number of lines based on breakpoints or complex patterns can be tricky without using media queries or :nth-child. So this module is designed to mimic -webkit-line-clamp based on an element's height only in browsers that don't support it.

## Installation

### NPM

```

npm install clamps --save

```

### Yarn

```

yarn add clamps

```

### Script Tag

```

```

## Usage

### CSS + HTML

First, apply the `-webkit-line-clamp` styling for browsers with native support. Next, set the `max-height` or `height` which will be used to calculate the number of lines in browsers that ignore the -webkit-line-clamp property. For the best results, include a `line-height` as well.

```



  ...



```


```

.line-clamp {

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  max-height: 60px;

  line-height: 20px;

}

```

### JS

After importing the module (or adding the script tag), initialize with the elements to clamp.

```

var els = document.querySelectorAll('.line-clamp');

Clamps(els);

```

## Notes

* Since the goal is to copy -webkit-line-clamp behavior as closely as possible, this module doesn't accept any options for customization.

* The line clamping does not update on resize. I leave it to the user to decide if that seems necessary on any given project.

## License

[MIT](LICENSE)