[Bigtext] jQuery Plugin Dynamically Resize Text Size To Fit Container

jquery-bigtext plugin that makes HTML body tags as large as possible while still being true to the original.

Features:

  • Checks both heights and widths to prevent overflowing.
  • Auto text resizes on window size.
  • Rotates the text at any angle.
  • Limits the font size vertically or horizontally based on the parent element only.
  • It has the option to set the maximum font size for your text.

How to make use of it:

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

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

2. Create a container with a fixed width and height, and then add some text to that container.

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

3. The text will be enlarged as much 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>

Dynamically Resize Text Size To Fit Container Size, jquery-bigtext Plugin/Github


See Demo And Download

Official Website(DanielHoffmann): Click Here

This superior jQuery/javascript plugin is developed by DanielHoffmann. For extra Advanced Usage, please go to the official website.

Share