jQuery Plugin For Fitting Text To Its Container - textFit

jQuery Plugin For Fitting Text To Its Container - textFit
File Size: 12.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

textFit is a simple and fast jQuery plugin that automatically scale the text to fit the width or height of its container. The plugin respects existing CSS and fits within the box it is placed, regardless of padding, line-height, font-face, or letter-spacing.  For multi-line text, textFit automatically detect that and disable white-space: no-wrap! 

How to use it:

1. Include jQuery library and jQuery textFit on the web page

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.textFit.slow.js"></script>

2. Create a container for your text

<div id="container"> Text </div>

3. Call the plugin with options

<script>
$(function(){
  $("#container").textFit({
  maxFontSize: 120
  });
});
</script>

4. All the options

settings = {
// if true, textFit will align vertically using css tables
alignVert: false, 

// if true, textFit will set text-align: center
alignHoriz: false, 

// if true, textFit will not set white-space: no-wrap
multiLine: false, 

// disable to turn off automatic multi-line sensing
detectMultiLine: true, 

minFontSize: 6,
maxFontSize: 80,

// if true, textFit will re-process already-fit nodes. 
// Set to 'false' for better performance
reProcess: true, 

// if true, textFit will fit text to element width, 
// regardless of text height
widthOnly: false 
};

Change logs:

v2.2.0 (2015-05-16)

  • Throw errors instead of just printing to console when missing height/width.
  • Removed options.suppressErrors. Wrap in try/catch instead if you really need this.

This awesome jQuery plugin is developed by STRML. For more Advanced Usages, please check the demo page or visit the official website.