Multifunction Responsive Text Manipulataion Plugin - jQuery textFitter
| File Size: | 10.4 KB |
|---|---|
| Views Total: | 889 |
| 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.











