This time I will share jQuery Plugin and tutorial about Responsive Performant jQuery Text Resizing Plugin – FancyTextFill, hope it will help you in programming stack.
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:
2 |
$ yarn add fancy-textfill |
5 |
$ 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.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/fancy-text-fill.jQuery.js"></script> |
2. Wrap your text into a container with a fixed height.
3 |
Suspendisse egestas at mi ultrices interdum. Vivamus auctor tincidunt tortor eu faucibus. |
6 |
.myText { display: block; } |
3. Initialize the plugin and set the maximum/minimum font-size of the text.
1 |
$('.myText').fancyTextFill({ |
4. Re-initialize the plugin on window resize.
1 |
$(window).on('resize', function(){ |
2 |
$('.myText').fancyTextFill({ |
5. More configuration options.
01 |
$('.myText').fancyTextFill({ |
11 |
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.
