@chitovas/ngx-clamp

A lightweight Angular directive for clamping text to a specified number of lines or height. A fast, cross-browser alternative to CSS line-clamp that works in all browsers, including legacy browsers where native support is unavailable.

• Fast - Uses binary search algorithm for O(log n) truncation performance
• Universal - Works across all browsers including IE11 and older
• Lightweight - Zero dependencies, tree-shakeable

Installation

npm install @chitovas/ngx-clamp

Usage

import { Component } from '@angular/core';
import { NgxClamp } from '@chitovas/ngx-clamp';

@Component({
    selector: 'app-example',
    standalone: true,
    imports: [NgxClamp],
    template: ` <div ngxClamp [lines]="3">Long text content that will be clamped...</div> `,
})
export class ExampleComponent {}

Clamp by Height

<div ngxClamp [maxHeight]="100">Content clamped at 100px height...</div>

Custom Truncation Text

<div ngxClamp [lines]="3" truncationText=" Read more...">Content with custom truncation indicator...</div>

API

| Input | Type | Default | Description | | ---------------- | -------- | ------- | ----------------------------------- | | lines | number | - | Number of lines before clamping | | maxHeight | number | - | Maximum height (px) before clamping | | truncationText | string | '...' | Text appended to clamped content |

Use either lines or maxHeight. If both are provided, lines takes precedence.

License

MIT