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

Author: DiZhou92
Official Page: Go to website
Publish Date: December 4, 2019
License: MIT

Description:

A smart and responsive text truncation component for Angular that makes it possible to truncate long text (HTML content) to a specific number of lines.

How to use 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. Specify the maximum number of lines and customize the ellipsis 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>

You Might Be Interested In:

Add Comment