ngx-ellipsis

Angular library providing a directive to display an ellipsis if the containing text would overflow.

Supports text only - No HTML contents! (If you really do need html contents to be truncated, you might want to take a look at my spin-off lib: ngx-nested-ellipsis. It is able to do just that, but takes slightly more processing power to perform its task.)

Demo

For a demo either just checkout this project and run npm install && npm run start or visit the StackBlitz demo page.

Installation

For use in an existing angular project run npm install ngx-ellipsis --save.

Usage

Add the directive to the component, in which you want to use the ellipsis:

import { EllipsisDirective } from 'ngx-ellipsis';

@Component({
  selector: 'your-fancy-component',
  // ...
  imports: [ 
    EllipsisDirective,
    // ...
  ],
  standalone: true
})
export class YourFancyComponent {}

Then anywhere in this component's template:

<div style="width: 100px; height: 100px;" ellipsis>Your very long text</div>

<!-- Or for dynamic content: -->
<div style="width: 100px; height: 100px;" ellipsis [ellipsis-content]="yourDynamicContent"></div>

As you can see, you need to define the dimensions of your element yourself. (ngx-ellipsis doesn't automatically add any element styles.) But of course you don't need to use fixed widths/heights like in these examples. Flex layout shold work just fine for example.

Module import

Should you not be using angular standalone components in your project (available since angular 16), import EllipsisModule in your module instead - see old instructions for an example.

Extra options

You may add the following attributes to change the directive's behavior:

Build & publish on npm

In case you want to contribute/fork:

1. Run npm install
2. Adept version and author in ./projects/ngx-ellipsis/package.json and ./README.md and commit the changes to your fork.
3. Run npm run build-lib which outputs the build to ./dist/ngx-ellipsis.
4. To publish your build, run npm run publish-lib.

Running unit tests

Run npm run test ngx-ellipsis to execute the unit tests via Karma.

License

MIT