Author: | STRML |
---|---|
Views Total: | 640 views |
Official Page: | Go to website |
Last Update: | October 18, 2022 |
License: | MIT |
Preview:

Description:
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 </div>
3. Enable the text auto resizing
textFit(document.getElementsByClassName('box'));
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 })
Changelog:
10/18/2022
- v2.4.0
06/18/2019
- Fixes text never having an odd size
07/30/2018
- properly iterate over HTMLCollection objects.
- added alignVertWithFlexbox. This does better vertical alignment