Press "Enter" to skip to content

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.

Feature

  • 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

How to make use of it:

1. Install and import the module.

# NPM
$ npm install ngx-line-truncation --save
import { LineTruncationLibModule } from 'ngx-line-truncation';
@NgModule({
  imports: [
    ...
    LineTruncationLibModule,
    ...
  ]
})
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>
<p [line-truncation]="2"  [options]='{ellipsis: "@"}'>
  Welcome to {{ title }}!
</p>
<p [line-truncation]="3"  [options]="{ellipsis: "🚀"}" (hasTruncated)="handler(booleanValue)" [innerHTML]="myText" [disabled]="disabled">
  Welcome to {{ title }}!
</p>

Truncate Text To A Specific Numer Of Lines, ngx line truncation Plugin/Github


See Demo And Download

Official Website(diz517): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *