Skip to content

Instantly share code, notes, and snippets.

@yuest

yuest/ellipsis.js

Created March 27, 2011 11:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yuest/889145 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yuest/889145 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Yuest Wang revised this gist Apr 21, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ellipsis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,7 @@ $.fn.ellipsis = function () {
    'visibility': 'hidden',
    'overflow': 'hidden'
    }).insertAfter($el);
    $el.text(text);
    $t.text(text);
    if ($t.width() > w) {
    while ((c = Math.floor((b + a) / 2)) > a) {
  2. Yuest Wang revised this gist Apr 21, 2011. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ellipsis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    //
    // I think you should take care of resize event by yourself,
    // just call $('.elem').ellipsis() again after element resized.
    $.fn.ellipsis = function (resize) {
    $.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 ||
    @@ -30,6 +30,7 @@ $.fn.ellipsis = function (resize) {
    'visibility': 'hidden',
    'overflow': 'hidden'
    }).insertAfter($el);
    $t.text(text);
    if ($t.width() > w) {
    while ((c = Math.floor((b + a) / 2)) > a) {
    $t.text(text.substr(0, c) + '…');
  3. Yuest Wang created this gist Mar 27, 2011.
    46 changes: 46 additions & 0 deletions ellipsis.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    // 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 (resize) {
    $(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);
    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;
    };