# ngx-ellipsis

> Multiline text with ellipsis for angular

Latest version **5.0.4** (published 2025-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-ellipsis
pnpm add ngx-ellipsis
yarn add ngx-ellipsis
bun add ngx-ellipsis
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.4 |
| Published | 2025-12-26 |
| First published | 2017-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 105 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 96 |
| Author | Florian Lentsch |
| Maintainers | lentschi |

## Links

- npm: https://www.npmjs.com/package/ngx-ellipsis
- Repository: https://github.com/lentschi/ngx-ellipsis
- Homepage: https://github.com/lentschi/ngx-ellipsis#readme
- Issues: https://github.com/lentschi/ngx-ellipsis/issues
- npm.io page: https://npm.io/package/ngx-ellipsis

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0

## Recent versions

- 5.0.4 (latest) — 2025-12-26
- 5.0.3 — 2025-08-04
- 5.0.2 — 2025-03-01
- 5.0.1 — 2024-09-14
- 5.0.0 — 2024-09-13
- 4.1.4 — 2024-09-13
- 4.1.3 — 2024-01-07
- 4.1.2 — 2023-06-11
- 4.1.1 — 2022-12-26
- 4.1.0 — 2022-08-21
- 4.0.0 — 2022-07-01
- 3.1.6 — 2022-01-02
- 3.1.5 — 2021-12-17
- 3.1.4 — 2021-05-28
- 3.1.3 — 2021-05-22
- … 37 more at https://npm.io/package/ngx-ellipsis/versions

## README

# 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](https://github.com/lentschi/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](https://stackblitz.com/github/lentschi/ngx-ellipsis?file=src%2Fapp%2Fapp.component.html).

## 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:

```typescript
import { EllipsisDirective } from 'ngx-ellipsis';

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

```



Then anywhere in this component's template:

```html
<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](https://blog.angular-university.io/angular-standalone-components/) in your project (available since angular 16), import `EllipsisModule` in your module instead - see [old instructions](https://github.com/lentschi/ngx-ellipsis/blob/v4.1.4/README.md#installation) for an example.

### Extra options

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

| attribute | meaning |
| ---- | ---- |
| __ellipsis__ | _required_ If you pass an attribute value (e.g. `ellipsis=" More ..."`) you can override the text that will be appended, should it be necessary to truncate the text (_default_: "...")|
| __ellipsis-content__ | Use this for dynamic content, that will be subject to asynchronous changes (e.g.: `[ellipsis-content]="myVar"`) |
| __ellipsis-word-boundaries__ | If you pass this attribute, the text won't be truncated at just any character but only at those in the attribute's value. For example `ellipsis-word-boundaries=" \n"` will allow the text to break at spaces and newlines only |
| __ellipsis-substr-fn__ | `substr` function to use for string splitting. Defaults to the native `String#substr`. (This may for example be used to avoid splitting [surrogate pairs](http://en.wikipedia.org/wiki/UTF-16) - used by some emojis - by providing a lib such as [runes](https://github.com/dotcypress/runes).) |
| __ellipsis-resize-detection__ | How resize events should be detected - these are the possible values: <ul><li>__resize-observer__: _default_ Use native ResizeObserver - see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver</li><li>__window__: Only listen if the whole window has been resized/changed orientation (Possibly better performance, but obviously won't trigger on resize caused directly or indirectly by javascript.)</li><li>__manual__: Ellipsis is never applied automatically. Instead the consuming app may use `#ell="ellipsis"` in the template and `this.ell.applyEllipsis()` in the component code.</li></ul> |
| __ellipsis-click-more__ | Event emitter - If set, the text defined by the `ellipsis`  attribute will be converted into a clickable link. For example `(ellipsis-click-more)="moreClicked()"` will call your component's `moreClicked()` method when the user clicks on the link.|
| __ellipsis-change__ | Event emitter - Will be emitted whenever the ellipsis has been recalculated (depending on `ellipsis-resize-detection`). If the text had to be truncated the position of the last visible character will be emitted, else `null`.|

## Build & publish on npm

In case you want to contribute/fork:

1. Run `npm install`
1. Adept version and author in `./projects/ngx-ellipsis/package.json` and `./README.md` and commit the changes to your fork.
1. Run `npm run build-lib` which outputs the build to `./dist/ngx-ellipsis`.
1. 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](https://karma-runner.github.io).

## License

MIT

---
_Source: https://npm.io/package/ngx-ellipsis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._