Small JavaScript Library For Text Auto Resizing – textFit

Category: Javascript , Text | October 18, 2022
Views Total:763 views
Official Page:Go to website
Last Update:October 18, 2022


Small JavaScript Library For Text Auto Resizing – textFit


textFit is a standalone JavaScript library that automatically and dynamically scales the text to fit inside a fixed-width container. Supports both single or multi-line text.

Basic usage:

1. Load the textFit.js in your document.

<script src="textFit.js"></script>

2. It will make the *text* content inside a container scale to fit the container. The container is required to have a set width and height.

<div class="box" style="width:300px;height:300px">
  Text Here

3. Enable the text auto resizing


4. Available options.

textFit(document.getElementsByClassName('box'), {
  // align vertically using css tables
  alignVert: false,
  // set text-align: center
  alignHoriz: false, 
  // not set white-space: no-wrap
  multiLine: false, 
  // disable to turn off automatic multi-line sensing
  detectMultiLine: true, 
  // Min / Max font size
  minFontSize: 6,
  maxFontSize: 80,
  // Re-process already-fit nodes. 
  // Set to 'false' for better performance
  reProcess: true, 
  // Fit text to element width, regardless of text height
  widthOnly: false,
   // if true, textFit will use flexbox for vertical alignment
  alignVertWithFlexbox: false



  • v2.4.0


  • Fixes text never having an odd size


  • properly iterate over HTMLCollection objects.
  • added alignVertWithFlexbox. This does better vertical alignment

You Might Be Interested In:

Leave a Reply