Multifunction Responsive Text Manipulataion Plugin - jQuery textFitter

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