πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Badonkatrunc is a jQuery plugin for dynamic text truncation and layout. Use it to truncate excerpts of unpredictable length, find the optimal font size for groups of elements or dynamically resize text for a responsive layout!

Plugins Responsive Text Effect

Documentation

#Badonkatrunc ##jQuery plugin for dynamic text layout and truncation
Developed by Joel Day at Plexipixel, Inc., creators of Sticky Brand Playβ„’
Demos available at http://badonkatrunc.com

###Overview
Badonkatrunc dynamically resizes or truncates text to fit within the size constraints of block elements. Can be used both as a text-overflow: ellipsis polyfill or as a tool for responsive layout. Fully maintains nested inline and block content, including links and images.

Tested with Chrome, Firefox, IE 7+, Safari (Mac/Win/iOS) and Opera.

###Example Usage
// Limits contents of target elements to a single line, truncating when nessecary, based on target element width. $('header').badonkatrunc();

// Reduces font size to 70% of the original size before truncating. // Increases font size up to 250% of the original size if space is available. $('header').badonkatrunc({ minimumFontSize: 0.7, maximumFontSize: 2.5 });  // Reduces font size to 70% of the original size before allowing contents to wrap. No truncation occurs. $('header').badonkatrunc({ minimumFontSize: 0.7, truncate: false }); 

###Methods

<tr>     <td><code>destroy</code></td>     <td>Removes Badonkatrunc from target element(s) and restores original content.</td>     <td>none</td> </tr>  <tr>     <td><code>refresh</code></td>     <td>Forces target element(s) to be optimized again.</td>     <td>none</td> </tr>  <tr>     <td><code>changeContents</code></td>     <td>Replaces the original content with new content, copied either from an HTML string or from an element that contains the new content.</td>     <td>string | jQuery object | element</td> </tr> 
Name Description Arguments

###Options

<tr>     <td colspan="4"><strong>General</strong></td> </tr> <tr>     <td><code>automaticSizeTracking</code></td>     <td>Contents of target element(s) will be automatically optimized if the size of the target element(s) is changed.</td>     <td><code>false</code></td>     <td><code>true</code> | <code>false</code></td> </tr> <tr>     <td><code>fitDirection</code></td>     <td>Dimension (width or height) of the target element(s) used for optimization.</td>     <td><code>'horizontal'</code></td>     <td><code>'horizontal'</code> | <code>'vertical'</code></td> </tr>  <tr>     <td colspan="4"><strong>Font Size</strong></td> </tr> <tr>     <td><code>minimumFontSize</code></td>     <td>The minimum factor for the font size of the text within the target element(s).</td>     <td><code>1.0</code></td>     <td><code>0.0</code> or greater and less than or equal to <code>maximumFontSize</code></td> </tr> <tr>     <td><code>maximumFontSize</code></td>     <td>The maximum factor for the font size of the text within the target element(s).</td>     <td><code>1.0</code></td>     <td><code>0.0</code> or greater and equal to or greater than <code>minimumFontSize</code></td> </tr> <tr>     <td><code>fontSizeSynced</code></td>     <td>Font size of target elements will be constrained to the smallest optimal font size of the target elements.</td>     <td><code>false</code></td>     <td><code>true</code> | <code>false</code></td> </tr>   <tr>     <td colspan="4"><strong>Letter Spacing</strong></td> </tr> <tr>     <td><code>minimumLetterSpacing</code></td>     <td>The minimum letter spacing adjustment applied.</td>     <td><code>0.0</code></td>     <td>less than or equal to <code>maximumFontSize</code></td> </tr> <tr>     <td><code>maximumLetterSpacing</code></td>     <td>The maximum letter spacing adjustment applied.</td>     <td><code>0.0</code></td>     <td>equal to or greater than <code>minimumFontSize</code></td> </tr> <tr>     <td><code>letterSpacingSynced</code></td>     <td>Letter spacing of target elements will be constrained to the smallest optimal letter spacing of the target elements.</td>     <td><code>false</code></td>     <td><code>true</code> | <code>false</code></td> </tr>  <tr>     <td colspan="4"><strong>Truncation</strong></td> </tr> <tr>     <td><code>truncate</code></td>     <td>Truncation will strip inline content from the target element(s) that would overflow in the current fit direction. When <code>fitDirection</code> is <code>'horizontal'</code> and truncation is enabled, word wrapping will not occur.</td>     <td><code>true</code></td>     <td><code>true</code> | <code>false</code></td> </tr> <tr>     <td><code>truncateString</code></td>     <td>The HTML content inserted at the truncation location when truncation occurs.</td>     <td><code>'&amp;hellip;'</code></td>     <td>string</td> </tr> <tr>     <td><code>truncateLocation</code></td>     <td>The location within the inline content to strip from the target element(s).</td>     <td><code>'end'</code></td>     <td><code>'start'</code> | <code>'middle'</code> | <code>'end'</code></td> </tr> <tr>     <td><code>truncateOnlyWholeWords</code></td>     <td>Truncation will be limited to white space so that whole words are retained.</td>     <td><code>false</code></td>     <td><code>true</code> | <code>false</code></td> </tr> 
Name Description Default Value Values

Notes

  • Content will be wrapped in a <span> element, which could adversely affect any direct-child selectors.
  • Whole-word truncation is preferred over letter spacing adjustment, when possible.

You May Also Like