Responsive Performant jQuery Text Resizing Plugin - FancyTextFill

Responsive Performant jQuery Text Resizing Plugin - FancyTextFill
File Size: 71.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="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.