Cross-browser ellipsis/truncation on multi-line texts. Optimized for performance, and supports tags inside clamped elements.
It is similar to
-webkit-line-clamp, but behaves more consistently and will respect your container dimensions without requiring a line count that you may not always know.
No dependencies. Comes with a jQuery function for ease of use in jQuery projects.
Supports all real browsers and IE11+. We are using this in real-world projects.
superclamp.min.js from the
dist directory and put it into your project.
For NPM projects, add
superclamp to your
import Superclamp from 'superclamp' when needed.
You want to truncate text to fit inside an element, so define your width/height restrictions on the element, e.g. via CSS. Superclamp will respect an element's padding.
Clamp them when the DOM is ready by calling
Superclamp.register with a
Re-clamp when necessary (e.g. on resize)
You may also re-clamp by triggering a custom event
superclamp:update anywhere inside
You don't need to do any clean-up yourself when removing DOM nodes.
All relevant data is stored on the DOM nodes themselves. They will remove any superclamp-related data with them.
If your project uses jQuery, Superclamp will automatically provide a
clamp() function to use on jQuery collections, like so:
I am a Ruby developer, so here is my stack:
bundleinside the project directory.
test/index.htmlin a browser. You may want to run
ruby -run -ehttpd . -p8000as a tiny web server.
We optimized heavily for performance, so code may not be as straight-forward as for a simpler solution. Here are a few things we are doing which increase complexity:
test/index.htmlas a human. Sorry for that.
<div>, ...) inside the clamped element will cause the ellipsis to be put underneath them. We could/should try putting the ellipsis inside.
Arne Hartherz from makandra.