{"id":13514618,"url":"https://github.com/makandra/superclamp","last_synced_at":"2025-08-09T00:21:29.556Z","repository":{"id":57374700,"uuid":"45408180","full_name":"makandra/superclamp","owner":"makandra","description":"Cross-browser ellipsis on multi-line texts. Optimized for performance, and supports tags inside clamped element. Even looks better than -webkit-clamp. Supports all real browsers and IE11+.","archived":false,"fork":false,"pushed_at":"2020-07-15T13:06:34.000Z","size":136,"stargazers_count":30,"open_issues_count":0,"forks_count":11,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-07T12:05:20.400Z","etag":null,"topics":["clamp","javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/makandra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-02T16:52:10.000Z","updated_at":"2024-01-10T07:15:22.000Z","dependencies_parsed_at":"2022-08-29T21:30:19.589Z","dependency_job_id":null,"html_url":"https://github.com/makandra/superclamp","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makandra%2Fsuperclamp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makandra%2Fsuperclamp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makandra%2Fsuperclamp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makandra%2Fsuperclamp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makandra","download_url":"https://codeload.github.com/makandra/superclamp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247947823,"owners_count":21023058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clamp","javascript"],"created_at":"2024-08-01T05:00:59.060Z","updated_at":"2025-04-08T23:41:11.407Z","avatar_url":"https://github.com/makandra.png","language":"HTML","funding_links":[],"categories":["HTML","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Superclamp\n\nCross-browser ellipsis/truncation on multi-line texts. Optimized for performance, and supports tags inside clamped elements.\n\nIt 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.\n\nNo dependencies. Comes with a jQuery function for ease of use in jQuery projects.\n\nSupports all real browsers and IE11+. We are using this in real-world projects.\n\n\n# Installation\n\nGrab `superclamp.js` or `superclamp.min.js` from the `dist` directory and put it into your project.\n\nFor NPM projects, add `superclamp` to your `package.json` and `import Superclamp from 'superclamp'` when needed.\n\n# Usage\n\nYou 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.\n\n\n1. Clamp them when the DOM is ready by calling `Superclamp.register` with a `NodeList`.\n\n       Superclamp.register(document.querySelectorAll('.clamp-me'));\n\n2. Re-clamp when necessary (e.g. on resize)\n\n       window.addEventListener('resize', Superclamp.reclampAll);\n\n\nYou may also re-clamp by triggering a custom event `superclamp:update` anywhere inside `document`.\n\n\n## Cleanup\n\nYou don't need to do any clean-up yourself when removing DOM nodes.\n\nAll relevant data is stored on the DOM nodes themselves. They will remove any superclamp-related data with them.\n\n\n## jQuery bindings\n\nIf your project uses jQuery, Superclamp will automatically provide a `clamp()` function to use on jQuery collections, like so:\n\n    $('.clamp-me').clamp();\n\n\n# Development\n\nI am a Ruby developer, so here is my stack:\n\n1. `bundle` inside the project directory.\n2. Run `guard` to watch the CoffeeScript source for changes and compile to JavaScript.\n3. Open `test/index.html` in a browser. You may want to run `ruby -run -ehttpd . -p8000` as a tiny web server.\n\n\n## The ugly parts\n\nWe 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:\n\n- Best fit is detected via binary search.\n- We avoid [layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing) by processing layout-modifying and layout-querying tasks en bloc.\n- Some smart logic to (re-)clamp only when necessary (because it's still expensive).\n\n\n## Tests\n\n- Testing is currently done by opening `test/index.html` as a human. Sorry for that.\n\n\n## TO DO\n\n- Maybe support containers of flexible height (e.g. flexbox children) instead of requiring `max-height` or `height`.\n- Get rid of CoffeeScript source.\n- Get rid of Ruby/Guard build stack.\n- Have tests.\n\n\n# Known issues\n\n- While inline nodes work nicely, block nodes (`\u003cp\u003e`, `\u003cdiv\u003e`, ...) inside the clamped element will cause the ellipsis to be put underneath them. We could/should try putting the ellipsis inside.\n\n\n# Credits\n\nArne Hartherz from [makandra](http://www.makandra.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakandra%2Fsuperclamp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakandra%2Fsuperclamp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakandra%2Fsuperclamp/lists"}