jQuery Plugin To Resize Text Based On The Container's Width - textfit

File Size: 5.3 KB
Views Total: 2444
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Resize Text Based On The Container's Width - textfit

Yet another jQuery text resize plugin for responsive web layout that automatically adjust the font size of your text to fit the width of its parent container.

How to use it:

1. Copy and include the JavaScript file textfit.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/textfit.js"></script>

2. Add the CSS class 'textfit' to the target text and done.

<div class="textfit">
  textfit.js
</div>

3. Set the maximum / minimum font size of your text when resizing.

<div class="textfit"
     data-textfit-min="10px"
     data-textfit-max="48px">
     textfit.js
</div>

4. Tweak the scaling when text resizing. 0 = invisible, 1 = normal, 2 = double size.

<div class="textfit"
     data-textfit-min="10px"
     data-textfit-max="48px"
     data-textfit-adjust="1">
     textfit.js
</div>

Change log:

2017-02-28


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