Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin for dynamic text layout and truncation
Branch: master

This branch is 3 commits behind plexipixel:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
CHANGELOG.md
MIT-LICENSE.txt
README.md
jquery.badonkatrunc.js
jquery.badonkatrunc.min.js
package.json

README.md

Badonkatrunc

jQuery plugin for dynamic text layout and truncation

Developed by Joel Day (joeld@plexipixel.com) at Plexipixel, Inc., creators of Sticky Brand Play™
Demos available at http://badonkatrunc.com (soon)

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

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

Options

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

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.
Something went wrong with that request. Please try again.