SlabText - Responsive Text Plugin For jQuery

SLABTEXT is a jQuery Plugin that makes it easy to produce Bold, Big, Attractive, and Responsive Text effects.

You might also like:

• WideText - Responsive Text Resize Plugin
• jQuery Plugin For Auto Resizing Text - textfill
• FitText - Flexible Font Size Plugin

How to use it:

1. The HTML

<h1 id="h1">jQueryScript.Net &ndash; One of the BEST jQuery websites in the world that provides web designers and developers with a simple way to preview and download a variety of Free jQuery Pluins. </h1>

2. The CSS

.slabtexted .slabtext {
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext {
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
 *letter-spacing:0 !important;
 *word-spacing:0 !important;
}
.slabtextdone .slabtext {
display: block;
}

3. Include jQuery library and SlabText.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="./js/jquery.slabtext.min.js"></script> 

4. Call the plugin with options

function slabTextHeadlines() {
  $("h1").slabText({
    // Don't slabtext the headers if the viewport is under 380px
    "viewportBreakpoint":380
  });
};

5. All possible options.

// The ratio used when calculating the characters per line
// (parent width / (font-size * fontRatio)).
"fontRatio"             : 0.78,

// Always recalculate the characters per line, not just when the
// font-size changes? Defaults to true (CPU intensive)
"forceNewCharCount"     : true,

// Do we wrap ampersands in <span class="amp">
"wrapAmpersand"         : true,

// Under what pixel width do we remove the slabtext styling?
"headerBreakpoint"      : null,
"viewportBreakpoint"    : null,

// Don't attach a resize event
"noResizeEvent"         : false,

// By many milliseconds do we throttle the resize event
"resizeThrottleTime"    : 300,

// The maximum pixel font size the script can set
"maxFontSize"           : 999,

// Do we try to tweak the letter-spacing or word-spacing?
"postTweak"             : true,

// Decimal precision to use when setting CSS values
"precision"             : 3,

// The min num of chars a line has to contain
"minCharsPerLine"       : 0,

// Callback function fired after the headline is redrawn
"onRender"              : null

Change Logs:

v2.4.0 (2016-03-16)

• Updated legacy IE CSS

v2.4.0 (2016-03-05)

• Added callback function and extra classnames

v1.8.3 (2013-03-26)

• Added sanity check to prevent infinite looping of the while loop if the parentWidth is 0, e.g. parent is "display: none".

---

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