a4-fit-text

Angular 7 Component to fit text into a container. The text will be auto scaled according to the width and height of the container.

How-To

Install

npm install a4-fit-text

app.module.ts

1. Add FitTextModule to imports of the app.module.ts.

 
...
import { FitTextModule } from 'a4-fit-text';
...
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    FitTextModule,
    ...
  ],
  ...
})

HTML

<div class="container">
  <fit-text text="This is a test"></fit-text>
</div>

CSS

.container {
  display: block;
  height: 100px;
}

Hint: Scale the browser and the text will auto scale to fit to the container.