ellipsis-angular v1.1.4

ellipsis-angular

Live demo

Sample demo page

What is this?

Angular 15+ directive to truncate multi-line text to the visible height. Unlike most ellipsis components this may be used with HTML content also. The end of the visible text is appended with an ellipsis symbol …

Instalation

npm install ellipsis-angular

Add module import to your Angular application:

import { EllipsisAngularModule } from 'ellipsis-angular';
...

@NgModule({
  imports: [
    BrowserModule,
    ...
    
    EllipsisAngularModule
  ],

Start using directive:

<div ellipsis-angular>
...
</div>

Features

There are two options available for using ellipsis-angular.

1. Static content

You may use it with static content without any additional settings:

<div ellipsis-angular>
<!-- Static HTML content goes here ---> 
</div>

There will be ellipsis added if needed once component loads or a browser window resizes. But it will not react to any inner content change.

2. Dynamic content

You may provide innerHTML parameter if you want ellipsis to react on inner HTML content change:

<div ellipsis-angular [innerHTML]="someHTMLStringVariable"></div>

This way ellipsis will render someHTMLStringVariable html content and will also react on its changes.

Browser compatibility

This directive is using ResizeObserver to detect container size changes. Please see can I use site for the browser support of this feature.

Credits

This component is inspired by dibari/angular-ellipsis AngularJS directive made by Eric Di Bari (dibari). Please see this author on GitHub. Some code samples are reused in this directive under MIT License.