Responsive Performant jQuery Text Resizing Plugin - FancyTextFill

FancyTextFill is a responsive and high-performance jQuery text resizing plugin inspired by textfill and& Bigtext that automatically increases and shrinks the font size of your text to fit its container.

Installation:

# Yarn
$ yarn add fancy-textfill

# NPM
$ npm install fancy-textfill --save

How to use it:

1. Load the latest version of jQuery and the jQuery FancyTextFill plugin's script fancy-text-fill.jQuery.js in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/fancy-text-fill.jQuery.js"></script>

2. Wrap your text into a container with a fixed height.

<div class="box">
  <span class="myText">
    Suspendisse egestas at mi ultrices interdum. Vivamus auctor tincidunt tortor eu faucibus. 
  </span>
</div>

.box {
  width: 100%;
  height: 50px;
}

.myText { display: block; }

3. Initialize the plugin and set the maximum/minimum font-size of the text.

$('.myText').fancyTextFill({
  minFontSize: 12,
  maxFontSize: 64
});

4. Re-initialize the plugin on window resize.

$(window).on('resize', function(){
  $('.myText').fancyTextFill({
    minFontSize: 12,
    maxFontSize: 64
  });
});

5. More configuration options.

$('.myText').fancyTextFill({

  // max width/height to resize
  maxWidth: null,
  maxHeight: null,

  // supports multiline text
  multiline: true,

  // When set to false, line-heights are assumed to be relative to the current font-size
  explicitLineHeight: false
  
});

Changelog:

v1.2.5 (2018-08-20)

• Prevent invisible element from occupying any space

---

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