NgxCut


> Angular directive for cutting texts with responsive options

> ✓ _Angular 20 compatible_

Here's the demo or stackblitz live preview or codesandbox live preview

- Lightweight
- No dependencies!
- Directive way
- Highly customizable options...
- Responsivity supported
- Predefined breakpoints (Bootrstrap, CDK, FxLayout, Tailwind)

🛠️ Install

1. Use yarn (or npm) to install the package

``terminal
yarn add ngx-cut
`

2. Add NgxCutModule into your imports

`typescript

export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
BrowserModule,
NgxCutModule.forRoot({
size: 1,
breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
responsiveSizes: {
xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
}
})
)
]
};

// or

import { NgxCutModule } from 'ngx-cut';

@NgModule({
// ...
imports: [
// ...
NgxCutModule.forRoot({
// directive without [size] uses this value
size: 1,
// custom breakpoints
breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
// lines be truncated in responsive mode
responsiveSizes: {
xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
}
})
]
})

// or

@NgModule({
// ...
imports: [
// ...
NgxCutModule.forRoot({
// directive without [size] uses responsiveSizes.sm
size: 'sm',
// predefined breakpoint ('BOOTSTRAP', 'FX_LAYOUT' or 'CDK')
breakpoints: 'BOOTSTRAP',
// lines be truncated in responsive mode
responsiveSizes: {
xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
}
})
]
})

// or

@NgModule({
// ...
imports: [
// ...
NgxCutModule
]
})
`

🚀 Quick start

$3

`html


some long text


`

$3

`code
some long...
`

🛠️ Options

$3

| Option | Type | Default | Description |
| ------------------- | ---------------- | ------------------------ | ------------------------------------------------------ |
| size | string or number | 1 | Number of truncated lines |
| breakpoints | object | DEFAULT_BREAKPOINTS | Breakpoints used in responsive mode |
| responsiveSizes | object | DEFAULT_RESPONSIVE_SIZES | How many lines should be truncated for each breakpoint |

$3

| Option | Type | Default | Description |
| ---------------------- | ------------ | ----------------------------- | -------------------------------------------- |
| [size] | object | value taken from root options | Number of truncated lines or responsive mode |
| [truncateDisabled] | boolean | false | Whether truncation is active or not |
| (truncateChange) | () => object | none | Event called when truncation is changed. |

🔧 Compatibility

| Angular | ngx-cut | Install |
| --------- | ------- | -------------------- |
| >= 20 | 3.x | yarn add ngx-cut |
| >= 12 | 2.x | yarn add ngx-cut@2 |
| >= 5 < 13 | 1.x | yarn add ngx-cut@1 |
| >= 5 < 13 | 0.x | yarn add ngx-cut@0` |

📦 Dependencies

_None_

🪪 License

Copyright © 2020 - 2025 Dominik Hladik

All contents are licensed under the [MIT license].

[mit license]: LICENSE