A Text Ellipsis jQuery Plugin For Firefox

ellipsis.js

// A jQuery plugin to enable the text ellipsis in firefox.
// see http://yue.st/notes/code/js/ellipsis.en.html
// usage:
//  $('.elementsNeedEllipsis').ellipsis();
//  the elements should be block level ('display: block' or 'display: inline-block')
//
// I think you should take care of resize event by yourself,
// just call $('.elem').ellipsis() again after element resized.
$.fn.ellipsis = function () {
    $(this).css({'white-space': 'nowrap', 'overflow': 'hidden'});
    // if browser support 'text-overflow' property, just use it
    if ('textOverflow' in document.documentElement.style ||
        'OTextOverflow' in document.documentElement.style) {
        $(this).css({
            'text-overflow': 'ellipsis',
            '-o-text-overflow': 'ellipsis'
        });
    } else { //firefox does not support the text-overflow property, so...
        $(this).each(function () {
            var $el = $(this);
            if (!$el.data('text')) $el.data('text', $el.text());
            var text = $el.attr('text') || $el.text(),
                w = $el.width(),
                a = 0,
                b = text.length,
                c = b,
                $t = $el.clone().css({
                    'position': 'absolute',
                    'width': 'auto',
                    'visibility': 'hidden',
                    'overflow': 'hidden'
                }).insertAfter($el);
            $el.text(text);
            $t.text(text);
            if ($t.width() > w) {
                while ((c = Math.floor((b + a) / 2)) > a) {
                    $t.text(text.substr(0, c) + '…');
                    if ($t.width() > w) b = c;
                    else a = c;
                }
                $el.text(text.substr(0, c) + '…');
                if (!$el.attr('title')) $el.attr('title', text);
            }
            $t.remove();
        });
    }
    return this;
};