TextLineClamp Angular Library.

A library that displays the last text with a Show More button attached when the number of lines to be printed is exceeded.

You can check out the demo here.

Installation

npm install --save text-line-clamp

Usage

import {
  FormsModule
} from '@angular/forms'
import {
  CommonModule
} from '@angular/common'

import {
  TextLineClampModule or TextLineClampComponent
} from 'text-line-clamp'

@Component( {

  imports: [

    FormsModule,
    CommonModule,

    TextLineClampModule or TextLineClampComponent
  ],
  standalone: true,
  selector: 'app-my-component',
  template: '<text-line-clamp [text]="text" [clamp]="2" [buttonName]="\'...More\'" [buttonColor]="\'#999\'"></text-line-clamp>'
} )
export class MyComponent {

  public text: string = 'Please enter the text content.'
}

Parameter

|Name|Type|Description|Default| |---|---|---|---| |[clamp]|number|Number of line breaks to show the Show More button|2| |[buttonName]|string|Show more button title|...More| |[buttonColor]|string|Show more button color|#999|

Change Log

1.0.0 : Initial release. 1.0.1 : Changed from word wrapping to character wrapping. 1.0.2 : Standalone / SSR compatible.

License

MIT

Other programs

https://bettep.org