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

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:

• WideText - Responsive Text Resize Plugin
• SlabText - Responsive Text Plugin
• jQuery Plugin For Auto Resizing Text - textfill
• FitText - Flexible Font Size Plugin

Basic Usage:

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

<script src="http://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.