jQuery Plugin For Auto Resizing Text - textfill

textfill is an useful jQuery text plugin that automatically resizes your text within a container to make the font size of the text as big as possible. You can also set the minimal or maximum font size of the text to fit your need.

You might also like:

• WideText - Responsive Text Resize Plugin
• SlabText - Responsive Text Plugin
• FitText - Flexible Font Size Plugin

Basic Usage:

1. Download and add jQuery library and textfill.js on your html page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.textfill.js" ></script>

2. Markup

<div class='demo' style='width:400px;height:300px;'>
  <span>YOUR TEXT</span>
</div>

3. Call the plugin with options

<script>
$(function(){
  $('.textfill').textfill({ 
    maxFontPixels: 36, // sizing up the text as big as possible to this setting
    minFontPixel: 4, // minimal font size
    innerTag: 'span', // by default all <span/>s' font size in $(selector) will be changed to fill.
    callback: null, // callback when each element's (innerTag) font size is resized.
    success: null, // callback when a resizing is done
    fail: null, // callback when a resizing is failed
    complete: null, // callback when all elements are done.
    widthOnly: false, // only resizing for width restraint, this is intentionally used with CSS white-space: nowrap for header tags.
    explicitWidth: null, // explicit dimension
    explicitHeight: null, // explicit dimension
    changeLineHeight: false // resize line-height of parent
  });
});
</script>

Change Log:

2018-02-24

• Use jQuery from node_modules version if available instead of using global version. This allows to use text-fill with tools like webpack or browserify where jquery might not be in window scope.

v0.6.0 (2014-08-20)

• add changeLineHeight (functionality to resize line-height of parent)
• greatly improved code readability and comments

v0.5.0 (2014-07-18)

• made option widthOnly imply 'whitespace:nowrap'

v0.4.0 (2013-08-17)

• add fail callback
• deprecate callback callback with success callback
• fix widthOnly option

v0.3.5 (2013-05-08)

• merge patch for compatibility to ZeptoJS

v0.3.4 (2013-04-10)

• fix error when no console.debug.
• add test for debug flag.

---

This awesome jQuery plugin is developed by jquery-textfill. For more Advanced Usages, please check the demo page or visit the official website.