https://github.com/MomenWalid/Truncate
Truncate Text Demo
https://github.com/MomenWalid/Truncate
Last synced: about 1 month ago
JSON representation
Truncate Text Demo
- Host: GitHub
- URL: https://github.com/MomenWalid/Truncate
- Owner: MomenWalid
- Created: 2025-02-05T23:15:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-02T21:52:34.000Z (about 2 months ago)
- Last Synced: 2025-03-02T22:28:08.289Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://truncate-gilt.vercel.app
- Size: 425 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - mTruncate - A lightweight and customizable Angular directive for truncating text with support for tooltips. (Table of contents / Third Party Components)
- fucking-awesome-angular - mTruncate - A lightweight and customizable Angular directive for truncating text with support for tooltips. (Table of contents / Third Party Components)
README
# mTruncate - Angular Truncate Directive
`mTruncate` is a lightweight and customizable Angular directive for truncating text with support for tooltips. It allows you to truncate text based on width or a specified number of lines and display a tooltip when the full text is not visible.
## 🚀 Features
- **Dynamic Truncation** – Truncate text based on characters, lines, or width.
- **Tooltip Support** – Shows full text when hovered.
- **Customizable** – Change styles, position, colors, and more.
- **Performance Optimized** – Uses event debouncing and efficient calculations.
- **Responsive** – Adapts to different screen sizes.
## 📦 Installation
Install the package via npm:
```sh
npm install m-truncate
```
Or using yarn:
```sh
yarn add m-truncate
```
## 📖 Usage
### 1. Import the Directive
The directive is `standalone`, so you can use it directly in your component.
```typescript
import { MTruncateDirective } from "m-truncate";
```
#### Apply to a Component Example
```typescript
import { MTruncateDirective } from "m-truncate";
@Component({
selector: "app-example",
standalone: true,
imports: [MTruncateDirective],
template: `
This text will be truncated`,
})
export class ExampleComponent {}
```
### 2. Apply to an Element
```html
This is a long text that will be truncated based on the specified conditions.
```
## 🔹 Inputs
| 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'` | Position of the tooltip (`top`, `bottom`, `left`, `right`). |
| `tooltipDirection` | `string` | `'ltr'` | Text direction (`ltr`, `rtl`). |
| `bgColor` | `string` | `'#fff'` | Tooltip background color. |
| `color` | `string` | `'#1c1c28'` | Tooltip text color. |
| `id` | `string` | `mId` | ID for the tooltip element. |
| `truncateSuffix` | `string` | `...` | Suffix to append when text is truncated. |
## ⚡ Examples
### Truncate by Characters
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus neque.
```
### Truncate by Lines
```html
This text will be truncated after two lines.
```
### Tooltip Position
```html
This tooltip will appear at the bottom
```
### Maximum Truncated Width
```html
This is a long text that will be truncated if it exceeds 150px.
```
## 🎨 Styling
You can customize the tooltip using CSS:
```css
.mTooltip {
font-family: Arial, sans-serif;
padding: 8px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
```
## 📌 Note
If you have an **Arabic version** of your application or need to **dynamically change the tooltip direction across your project**, you can use the `mTruncate` service to set the direction globally.
#### Use the Service in `app.component.ts`
```typescript
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"); // Change direction globally
}
}
```
## 📬 Contact
If you have any questions, need support, or want to contribute, feel free to reach out:
- 📧 Email: [[email protected]](mailto:[email protected])
- 🐙 GitHub: [MomenWalid](https://github.com/MomenWalid)