Dynamically Resize Text Size To Fit Container Size - jQuery Bigtext Plugin

Dynamically Resize Text Size To Fit Container Size - jQuery Bigtext Plugin
File Size: 6.23 KB
Views Total: 14248
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Bigtext is a jQuery text plugin that automatically enlarge the font size of your text to fill its parent container, without overflowing the container Div.

Features:

  • Checks both heights and widths to prevent overflowing.
  • Auto resizes the text on window's size changed.
  • Rotates the text at any angle.
  • Limits the font size vertically or horizontally based only on the parent element.
  • Has an option to limit the maximum font size of your text.

You might also like:

Basic Usage:

1. Include the jQuery javascript library and jQuery Bigtext plugin on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-bigtext.js"></script>

2. Create a container with fixed width and height, and then add some text into this container.

<div class="container" style="width: 300px;height: 200px;"> 
<span class="demo"> YOUR TEXT</span> 
</div>

3. Call the plugin. The text will be enlarged as big as possible to fit the container.

<script type="text/javascript">
$(document).ready(function() {
$(".demo").bigText();
});
</script>

4. Available options.

<script type="text/javascript">
$(document).ready(function() {
$(".demo").bigText({
rotateText: null, // Rotates the text by X degrees
fontSizeFactor: 0.8, // used to give some vertical spacing for letters that overflow the line-height 
maximumFontSize: null, // limits the maximum font size of your text
limitingDimension: "both", // In which dimension the font size should be limited. Possible values: "width", "height" or "both". 
horizontalAlign: "center",
verticalAlign: "center",
textAlign: "center"
});
});
</script>

Change logs:

2015-01-07

  • v1.3.0

2014-05-13

  • Major cleanup and added some new functionality

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