{"id":13660778,"url":"https://github.com/chaodyz/ngx-line-truncation","last_synced_at":"2026-04-30T19:05:17.199Z","repository":{"id":38328007,"uuid":"169006296","full_name":"chaodyz/ngx-line-truncation","owner":"chaodyz","description":"An Angular line truncating solution. Truncate text block by given line number and add ellipsis to the end.","archived":false,"fork":false,"pushed_at":"2023-10-05T12:08:04.000Z","size":3524,"stargazers_count":14,"open_issues_count":15,"forks_count":14,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-27T00:02:52.023Z","etag":null,"topics":["ellipsis","line-clamp","richtext","shave","shorten","trim","truncate","truncation"],"latest_commit_sha":null,"homepage":"https://line-truncation-site.appspot.com/","language":"TypeScript","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/chaodyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-03T23:40:05.000Z","updated_at":"2023-05-25T12:37:32.000Z","dependencies_parsed_at":"2024-01-15T20:50:49.477Z","dependency_job_id":"4ffdb113-9b4d-47f2-9f51-50d278d1d6a5","html_url":"https://github.com/chaodyz/ngx-line-truncation","commit_stats":null,"previous_names":["dizhou92/ng-line-truncation","dizhou92/ngx-line-truncation","diz517/ngx-line-truncation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chaodyz/ngx-line-truncation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaodyz%2Fngx-line-truncation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaodyz%2Fngx-line-truncation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaodyz%2Fngx-line-truncation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaodyz%2Fngx-line-truncation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chaodyz","download_url":"https://codeload.github.com/chaodyz/ngx-line-truncation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chaodyz%2Fngx-line-truncation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32473845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ellipsis","line-clamp","richtext","shave","shorten","trim","truncate","truncation"],"created_at":"2024-08-02T05:01:25.653Z","updated_at":"2026-04-30T19:05:12.187Z","avatar_url":"https://github.com/chaodyz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Logo](logo.png)\n\n# NGX Line Truncation\n\nNgx Line Truncation is line truncation implementation for Angular that truncate text by user defined line number. ([demo](https://stackblitz.com/github/DiZhou92/ngx-line-truncation-demo))\n\nIn addition to Line Truncation, this package has few performance optimizations not only improved usability but also reliability in Angular platform. It uses retry logic to guarantee we get Client Height text block all the time, which is an essential value of the truncation input. It also watches the dom changes,to catch the case when the text value get applied at a later time.\n\n## Feature\n\n- Tailor made for Angular platform\n- Smart, just declare how many lines you wish to truncate for, no need to provide max-height, line-height\n- Works with nest DOM element\n- Support rich text, maintain original HTML element tags and styles\n- Lightening fast and capable\n- Custom ellipsis character\n- Re-execute on window resize\n- Dynamic content truncation\n\n## Installation\n\nTo install, simply run\n\n`npm install ngx-line-truncation`\n\nAnd import to the module that use truncation\n\n```js\nimport { LineTruncationLibModule } from 'ngx-line-truncation';\n\n  ...\n\n@NgModule({\nimports: [\n  ...\n\nLineTruncationLibModule\n]\n})\nexport class MyModule { }\n```\n\nif you import this package into a shared module, you need to export LineTruncationDirective\n\n```js\n@NgModule({\n  imports: [LineTruncationLibModule],\n  declarations: [...components],\n  exports: [...components, LineTruncationDirective],\n  entryComponents: []\n})\nexport class MySharedModule {\n```\n\n## How to use\n\nDeclare [line-truncation] with div, p, and pass a number that indicates how many lines of text you are expected to truncate\n\n```html\n\u003cp [line-truncation]=\"2\"\u003e\n  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt consequatur\n  ipsum unde doloremque aliquid hic vitae iure necessitatibus, maiores\n  repellendus, quos dignissimos Quis necessitatibus quos voluptas nesciunt\n  facere mollitia cupiditate.\n\u003c/p\u003e\n```\n\n```html\n\u003cp [line-truncation]=\"2\" [innerHTML]=\"myText\"\u003e\u003c/p\u003e\n```\n\n```html\n\u003cdiv [line-truncation]=\"2\"\u003e\n  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt consequatur\n  ipsum unde doloremque aliquid hic vitae iure necessitatibus, maiores\n  repellendus, quos dignissimos? Quis necessitatibus quos voluptas nesciunt\n  facere mollitia cupiditate.\n\u003c/div\u003e\n```\n\nOptionally, an output function can help to know if the text has been truncate\n\n```html\n\u003cp\n  [line-truncation]=\"numOfLines\"\n  (hasTruncated)=\"handler($event)\"\n  [innerHTML]=\"myText\"\n\u003e\u003c/p\u003e\n```\n\nin your component.ts file\n\n```js\nexport class myComponent implements OnInit {\n\n  hasTruncated = false;\n  numberOfLines = 2;\n\n  myText=`Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga itaque voluptatibus sequi laborum, consequatur aut nisi.\n  Eaque nulla animi qui exercitationem suscipit voluptas cum est dicta, magnam odio et distinctio?`;\n\n  //...\n\n  handler(res: boolean){\n    this.hasTruncated = res;\n  }\n```\n\nBy default, '...' will be added to the end of the truncated body, if you wish to use your desired ellipsis, you can pass an object like this\n\n```html\n\u003cp [line-truncation]=\"numOfLines\" [options]=\"{ellipsis: \"🚀\"}\" (hasTruncated)=\"handler(booleanValue)\" [innerHTML]=\"myText\" [disabled]=\"disabled\"\u003e\u003c/p\u003e\n```\n\nKnown issue:\n\n- When you specify emoji as ellipsis 🚀, or use rich text( \u003cp [innerHTML]\u003e), the truncation result might ended up with less lines than you desired(e.g. desire 3, but only have 1).\n  I will be looking into this issue in the future, current `work around` for this issue is say you realize you get 1 line instead 3, you could declare with 5, it will be truncated to 3.\n\n## List of Input \u0026 Output\n\n@Input(\"line-truncation\")\nlines = 1; -- Lines that you desire, default to 1\n\n@Input()\noptions: Options = { ellipsis: \"\\u2026\" }; -- Ellipsis Character, default to ...\n\n@Input() set disabled(val: boolean) {\nthis.\\_disabled\\$.next(val); -- To disable the truncation, default to false\n}\n\n@Input()\nwatchChanges = false; -- To watch the text change and truncate, default to false\n\n@Output()\nhasTruncated = new EventEmitter(); -- \\$event to true if truncation happen (every time)\n\n## Update\n\n### 2022\n- 06-06 For lib version v1.9.1 now support peer dependency Angular ~14\n- 05-25 For lib version v1.8.1 now support peer dependency Angular ~13\n\n### 2021\n\n- 06-08 For lib version v1.71 now support peer dependency Angular 10~12\n- 06-03 update peer dependency to Angular 12\n- 03-13 [Complete subject on ngOnDestroy](https://github.com/DiZhou92/ngx-line-truncation/commit/c345f12ad6107708a77c0849855f42d69051f5bb)\n- 03-13 [Save truncation status in public field](https://github.com/DiZhou92/ngx-line-truncation/commit/7e965def38104e7daa9b31dbc9c26c5b1d4e8b7e)\n\n### 2020\n\n- 12-03 [catch truncate errors like \"Must have child node\"](https://github.com/DiZhou92/ngx-line-truncation/commit/3cadff656282bd6599f0a6fd48b52e093b153894)\n  07-29 update dependency to Angular 10\n  04-19 update dependency to Angular 9\n\n### 2019\n\n- 12-02 add input watchChanges to provide truncation on dynamic text content\n\n- 10-27 add input disabled\n  fix an issue when not truncating, hasTruncated is not emitting value\n\n## Contact me\n\nIf you have more idea about improving this package, feel free to reach me at chaodyz@gmail.com\n\n## License\n\nThe repository code is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaodyz%2Fngx-line-truncation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaodyz%2Fngx-line-truncation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaodyz%2Fngx-line-truncation/lists"}