/** * Abbreviator jQuery Plugin (jQuery >= 1.2.x) * * Usage: * * $('#mydiv').abbrev(); // Autofit mydiv's innerHTML content horizontally * * This work is distributed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * Copyright 2008 Ben Vinegar [ ben ! benlog dot org ] */ (function($) { $(function() { // NOTE: We have to use a inside a max-width

for IE6 $('body').append('\

\ \

' ); }); $.fn.abbrev = function() { $(this).each(function() { // Grab unaltered content FIRST var content = $(this).html(); // Append our tmp div to the container element we're about // to abbreviate, so that it inherits the containers CSS properties // (font, padding, etc.) $("#abbreviator-tmp-div").appendTo(this); var containerWidth = $(this).width(); var contentWidth = $("#abbreviator-tmp-span").html(content).width(); // If the content fits inside the container, then skip // to the next element if (contentWidth <= containerWidth) { $('#abbreviator-tmp-div').appendTo('body'); return; } // Instead of just removing characters one-by-one until the content // fits (slow), we estimate a good starting place by taking the % // covered in pixel space and shorten the string by that amount. var coverage = containerWidth / contentWidth; var l = content.length; abbrevContent = content.substr(0, parseInt(l * coverage)); while ($('#abbreviator-tmp-span').html(ellipsifyString(abbrevContent)).width() >= containerWidth) { abbrevContent = abbrevContent.substring(0, abbrevContent.length - 1); } // Return our tmp span back to the element; otherwise it'll // be destroyed in the line below ... $('#abbreviator-tmp-div').appendTo('body'); $(this).html(abbrString(ellipsifyString(abbrevContent), content)); }); } // Private functions function ellipsifyString(s) { return s + '…'; } function abbrString(s, full) { return '' + s + ''; } })(jQuery);