Clamps

Demo

There are already a lot of great text truncation options out there (for example, line-clamp, Clamp.js, 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). 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

$3

``
npm install clamps --save
`

$3

`
yarn add clamps
`

$3

`

`

Usage

$3

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;
}
`

$3

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