clamps
v1.0.1
Published
A lightweight, Vanilla JS fallback for browsers without -webkit-line-clamp support.
Downloads
14
Maintainers
Readme
Clamps
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
NPM
npm install clamps --save
Yarn
yarn add clamps
Script Tag
<script src="path/to/clamps.min.js"></script>
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.
<div class="line-clamp">
...
</div>
.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.