Developed by Joel Day at Plexipixel, Inc., creators of Sticky Brand Play™
Demos available at http://badonkatrunc.com
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.
// 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 });| 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 |
| 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 |
<span> element, which could adversely affect any direct-child selectors.