Skip to content

Instantly share code, notes, and snippets.

@rmorse rmorse/ellipsis.js forked from yuest/ellipsis.js
Created Nov 14, 2011

Embed
What would you like to do?
A Text Ellipsis jQuery Plugin For Firefox
// 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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.