Recently, while working on some last-minute fixes for the Vimeo HTML player, I ran into a limitation of current-gen browsers that really frustrated me. It seems that there is no standardized, supported way to clamp an HTML element. What do I mean by clamp? If you have a design which limits your text to be only 2 or 3 lines long, but the text is dynamic and so can be any length it damn well pleases, clamping will ensure the text gets chopped off at the appropriate height and will add ellipsis at the end to denote that the content has been interrupted.
I did some research and found Dave DeSandro’s entry about -webkit-line-clamp which, through applying some seemingly unrelated and random CSS styles, does achieve this effect… sort of… most of the time. Here’s an example of some properly clamped text in our wonderful video player:
Great! That works! Well… sort of. Here’s what happens if your HTML element just happens to have a link as the last node of the element:
Whoops. It’s actually inserting the link from the very end of the paragraph even though it should be getting cut off. As Dave explained to me, -webkit-line-clamp is not only vendor-specific, it’s completely undocumented and experimental, so it can’t really be used reliably.
There are, of course, some caveats with using it. First, it can be a little expensive performance-wise if used incorrectly. Clamp.js works by removing one character at a time from the end of the content until it fits inside a designated area. That means that if your content is 30 lines long and it needs to get down to 2 lines, it’s going to loop hundreds and hundres of times until it gets from 30 to 2 lines. This is something I want to improve on at some point, but for now just be aware of this. Second, I haven’t done too much extensive testing (that’s what you guys are for!) so there are bound to be bugs. Don’t use this in mission critical projects just yet.
Other than that feel free to use the heck out of it and give me some feedback. I would love to know what you think!
Update: Performance updates released with v0.2.