🧩 mTruncate — Angular Text Truncation Directive

mTruncate is a lightweight, flexible, and fully standalone Angular directive that truncates text dynamically and optionally displays a tooltip with the full text.
It supports character-based, line-based, and width-based truncation, while ensuring excellent performance and responsiveness.

🚀 Features

✅ Dynamic Truncation – Truncate text by character count, width, or number of lines.
💬 Tooltip Support – Displays the full text when hovered.
⚙️ Customizable – Control tooltip color, direction, position, and suffix.
⚡ Performance Optimized – Uses event debouncing and efficient DOM updates.
📱 Responsive – Automatically adjusts on window resize.
🌍 RTL/LTR Support – Seamless for Arabic and multilingual applications.
🧠 Standalone Directive – No need for NgModules; works in any Angular component.

📦 Installation

Install via npm:

npm install m-truncate

or via yarn:

yarn add m-truncate

🧠 Quick Start

1. Import the Directive

Since mTruncate is a standalone directive, simply import it into your component:

import { MTruncateDirective } from "m-truncate";

2. Apply It in a Component

import { Component } from "@angular/core";
import { MTruncateDirective } from "m-truncate";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [MTruncateDirective],
  template: ` <div mTruncate>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia.</div> `,
})
export class ExampleComponent {}

💡 Usage Examples

🔹 Automatic / Dynamic Truncation

<p mTruncate>This text will be truncated if it exceeds the element width.</p>

🔹 Truncate by Characters

<p mTruncate [truncateChar]="40">This text will be truncated after 40 characters.</p>

🔹 Truncate by Number of Lines

<div mTruncate [truncateLines]="2">This paragraph will be truncated after two lines of text.</div>

🔹 Truncate by Element Width

<span mTruncate [maxTruncateWidth]="120"> This text will be truncated if it exceeds 120px in width. </span>

🔹 Tooltip Position

<p mTruncate [truncateChar]="30" [tooltipPosition]="'bottom'">This tooltip appears below the text.</p>

| Input Property | Type | Default | Description | | ------------------ | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | truncateChar | number | 0 | Maximum number of characters before truncation occurs. | | truncateLines | number | 0 | Number of lines before truncation. | | maxTruncateWidth | number | 0 | Maximum width (in pixels) before truncation is applied. | | maxTooltipWidth | number | 0 | Maximum width for tooltip. | | showTooltip | boolean | true | Show tooltip on hover. | | tooltipPosition | string | 'top' | Tooltip position (top, bottom, left, or right). | | tooltipDirection | string | 'ltr' | Tooltip text direction (ltr or rtl). | | bgColor | string | '#fff' | Tooltip background color. | | color | string | '#1c1c28' | Tooltip text color. | | id | string | 'mId' | ID for the tooltip element. | | truncateSuffix | string | '...' | Suffix appended when text is truncated. | | resize | boolean | false | If true, the directive automatically re-evaluates truncation when the window is resized. | | textChange | string | '' | When this input value changes, the directive re-checks and re-applies truncation (useful for dynamically updated text). |

🎨 Styling

You can customize the tooltip globally using CSS:

.mTooltip {
  font-family: "Arial", sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1c1c28;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease;
}

🌍 Direction Support (LTR / RTL)

If your application supports multiple languages or you want to set tooltip direction globally, you can use the provided service.

Example: Set Global Tooltip Direction

import { Component } from "@angular/core";
import { MTruncateService } from "m-truncate";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
})
export class AppComponent {
  constructor(private mTruncateService: MTruncateService) {}

  ngOnInit() {
    this.mTruncateService.setDirection("rtl"); // Global RTL support
  }
}

🧾 License

MIT License © 2025 Mo'men Waled

📬 Contact

If you have questions, feedback, or would like to contribute:

• 📧 Email: [email protected]
• 🐙 GitHub: MomenWalid
• 🌐 Portfolio: https://momenwalid.github.io/Portfolio/

Made with ❤️ by Mo'men Waled