Multifunction Responsive Text Manipulataion Plugin - jQuery textFitter
File Size: | 10.4 KB |
---|---|
Views Total: | 840 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The main goal of the jQuery textFitter plugin is to dynamically resize text to fit its parent container's width and height. It also has the ability to equalize multiple text nodes and to center the text whitin the container. Smart word break is supported as well.
How to use it:
1. Include the main JavaScript file jquery.bb-textfitter.js
after jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.bb-textfitter.js"></script>
2. Call the function on the text container and done.
<div class="demo"> <p>Multifunction Responsive Text Manipulataion Plugin</p> </div>
$('.demo p').bbFitText();
3. Equalize multiple text nodes.
<div class="demo"> <p>Paragraph 1</p> </div> <div class="demo"> <p>Paragrahph 2</p> </div> <div class="demo"> <p>Paragrahph 3</p> </div> ...
$('.demo p').bbFitText().bbEqualizeText();
4. Enable the smart text break functionality.
$('.demo p').bbFitText({ smartBreak: true, smartBreakCharacter: '~' }).bbEqualizeText();
5. All default plugin options.
$('.demo p').bbFitText({ // min/max font size minFontSize : 6, maxFontSize : 60, // line height lineHeight : 1.2, // text centering centerHorizontal : false, centerVertical : false, // force text onto single line forceSingleLine : false, // possibility to scale text up too scaleUpToo : false, // smart break smartBreak : false, // character to break a word on smartBreakCharacter : '~' })
This awesome jQuery plugin is developed by bobbybol. For more Advanced Usages, please check the demo page or visit the official website.