Auto Resize Text To Fit Its Container - jQuery BigText

File Size: 154 KB
Views Total: 1782
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Resize Text To Fit Its Container - jQuery BigText

Yet another jQuery text resize plugin that automatically adjusts the font size of your text to fit its parent container on window resize. So that the text fills the container and there is no free room left. Works both with single line text and multi line text. Perfect for headlines, Slogans, titles, etc.

How to use it:

1. Load the jQuery BigText plugin's script after the latest jQuery library:

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

2. Call the plugin on the target text container and done.

<div id="element">
  <span>jQuery Script</span>
  <span>A JavaScript Website</span>
</div>
$('#element').bigtext({
  // options here
});

3. Set the min/max font size on text resize.

$('#element').bigtext({
  minfontsize: 16, // 16px
  maxfontsize: 60 // 60px
});

4. Restrict to a subset of children.

$('#element').bigtext({
  childSelector: '> p'
});

Changelog:

2025-06-07

  • Remove bower, updates jquery 1.x and qunit

2017-10-03

  • fixed for jQuery 1.9+

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