@yomyer/fittext

cropAn angular (typescript) directive to do what fittext.js did when jquery was in vogue. This option automatically adjusts the font size to match the width of your container, plus if a[minFontSize] is defined and the ellipse does not fit, it activates the ellipse and crop the text and adds a symbol of etc. (...)

Installation

Install the library

$ npm install --save @yomyer/fittext

Usage

Import it in your Angular project as a module

1. Declare it in your module

   import {FittextModule} from '@yomyer/fittext';
   
   @NgModule({
     imports: [
       FittextModule,
       ...
     ]
   })
   

2. Use it in a component

   The element that contains this directive should have a CSS width!

   import {Component} from '@angular/core';
   
   @Component({
     selector: 'hero',
     template: `
       <div style="align-content: center;">
           <div style="width: 20%; height: 20%; margin: 0 auto;">
               <div fittext>test</div>
           </div>
        </div>`
   })
   
   export class AppComponent {}

   Parameters:

Parameter	Description	Values
fittext (required)	Selector for the directive.	boolean (defaults to true)
[activateOnResize] (optional)	enable/disable the auto-scale in case of window resize	boolean (defaults to true)
[container] (optional)	parent to compare width/height	nativeElement
[compression] (optional)	compression rate. How fast should the text resize?	number (defaults to 1)
[minFontSize] (optional)	minimum font size allowed on element	number (defaults to 0)
[maxFontSize] (optional)	maximum font size allowed on element	number (defaults to infinity)
[ellipsis] (optional)	enable/disable ellipis crop	boolean (defaults to true)
[ellipsisSymbol] (optional)	symbol to use in ellipis	string (defaults to …)

Development

Want to contribute? Great! Simply, clone the repository!

License

ISC

- Yomyer