Angular Truncate Text To A Specific Numer Of Lines | ngx-line-truncation

Ngx Line Truncation is a line truncation app for Angular that truncates text by the user-specified line number.

In addition to Line Truncation, this package contains a few performance improvements to not only improve usability but also reliability in the Angular platform. It uses retry logic to ensure we get the client height text block all the time, which is a key value of the truncation input.


  • Designed specifically for Angular
  • Smart, just select how many lines you want to trim, no need to provide max line height and height
  • Works with nested DOM element
  • Support rich text, preserve original HTML element tags and styles
  • Lightning fast and capable
  • Custom cutting character
  • Re-execute when the window resizes
  • Dynamic content truncation

Must ReadMultiline Truncated Text With Show More/Less Links | show-more

How to make use of it:

1. Install and import the module.

$ npm install ngx-line-truncation --save
import { LineTruncationLibModule } from 'ngx-line-truncation';
  imports: [
export class MyModule { }

2. Set the maximum number of lines and assign the trim character as follows:

<p [line-truncation]="2">
  Welcome to {{ title }}!
<p [line-truncation]="2"  [options]='{ellipsis: "@"}'>
  Welcome to {{ title }}!
<p [line-truncation]="3"  [options]="{ellipsis: "🚀"}" (hasTruncated)="handler(booleanValue)" [innerHTML]="myText" [disabled]="disabled">
  Welcome to {{ title }}!


Javascript Plugin that Truncates Multi-line Text Content | Cuttr.js
One-Line Clipped With An Ellipsis and Displays a Tooltip When Scrolling | Hover Truncated

See Demo And Download

Official Website(diz517): Click Here

This superior jQuery/javascript plugin is developed by diz517. For extra Advanced Usage, please go to the official website.