ellipsis-angular
v1.1.4
Published
A simple ellipsis directive for Angular 15+ that cuts content and adds '…' character if HTML content is overflowed.
Downloads
148
Maintainers
Readme
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.