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)
- Use yarn (or npm) to install the package
yarn add ngx-cut - Add
NgxCutModuleinto yourimports
exportconstappConfig: 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}}}))]};// orimport{NgxCutModule}from'ngx-cut'; @NgModule({// ...imports: [// ...NgxCutModule.forRoot({// directive without [size] uses this valuesize: 1,// custom breakpointsbreakpoints: {sm: 300,md: 400,lg: 500,xl: 600},// lines be truncated in responsive moderesponsiveSizes: {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.smsize: 'sm',// predefined breakpoint ('BOOTSTRAP', 'FX_LAYOUT' or 'CDK')breakpoints: 'BOOTSTRAP',// lines be truncated in responsive moderesponsiveSizes: {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]})<pngxCut>some long text</p> some long... | 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 |
| 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. |
| 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 |
None
Copyright © 2020 - 2025 Dominik Hladik
All contents are licensed under the MIT license.