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.
npm install clamps --save
yarn add clamps
<script src="path/to/clamps.min.js"></script>
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;
}
After importing the module (or adding the script tag), initialize with the elements to clamp.
var els = document.querySelectorAll('.line-clamp');
Clamps(els);
- 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.