Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show text overflow ellipsis in the middle of the text

Am using kendo grid with fixed width. If the text is more then its showing ellipsis. But I can differentiate the rows based on the end of the string. Due to this effect am unable to find it. So, I need ellipsis in the middle of text.

Example:

abcdefghijklm
abcdefg...  -> Normal Ellipse
abcd...klm  -> I Want need this type of output
like image 719
Anil Talla Avatar asked Jun 20 '15 10:06

Anil Talla


1 Answers

One approach is as follows, though this does – of course – rely on JavaScript:

function centralEllipsis(opts) {

    // the default settings, which can be overridden
    // by the user:
    var settings = {
        // the number of the original characters to show:
        'maxLength': 7,

        // the character-sequence, or HTML character-
        // entity to use to replace the missing characters:
        'ellipsis': '…',

        // the attribute to which you'd like to write the
        // original text (this function does also write
        // the text to the 'title' attribute though):
        'writeToAttribute': 'data-originaltext'
    },

   // the element upon which we're working (cached
   // because we'll access it more than once):
    _this = this;

    // iterating over the properties supplied by the user:
    for (var prop in opts) {

        // if the current property ('prop') of the object
        // ('opts') is enumerable and not from the prototype:
        if (opts.hasOwnProperty(prop)) {

            // we update that property in the settings object
            // (if the typeof the property-value ('opts[prop]')
            // is not equal to the string 'undefined', if it is
            // then we use the original property-value:
            settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
        }
    }

    // we divide the settings.maxLength by 2 to work out
    // how many characters should appear at the beginning
    // of the string; using Math.ceil() to ensure whole
    // numbers:
    var prefixLength = Math.ceil(settings.maxLength / 2),

        // finding the length of the suffix by subtraction
        // of the prefixLength from the settings.maxLength:
        suffixLength = settings.maxLength - prefixLength,

        // setting the textContent of the current element
        // as the element's title text and storing it in
        // a variable:
        originalText = _this.title = _this.textContent,

        // empty variables initialised for later:
        prefix, suffix;

    // if the maxLength is less than the length of the original
    // text, then we go ahead (if not, we do nothing):
    if (settings.maxLength < originalText.length) {

        // storing the original text in the specified attribute:    
        _this.setAttribute(settings.writeToAttribute, originalText);

        // the prefix is the substring of the originalText, for
        // settings.maxLength number of characters starting at 
        // index 0 (the beginning of the string):
        prefix = originalText.substr(0, prefixLength);

        // if settings.maxLength is less than 2 then the
        // suffix is an empty string (''), otherwise it's
        // a substring of the originalText, using a negative
        // index which takes the last 'suffixLength'
        // characters from the string:
        suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

        // here we set the innerHTML (so that we can use HTML
        // character-entities, such as '&hellip;') to the
        // prefix + the settings.ellipsis character(s) + the suffix:
        _this.innerHTML = prefix + settings.ellipsis + suffix;
    }

}

// Using Function.prototype.call() to use Array.prototype.forEach()
// on the array-like NodeList returned by document.querySelectorAll():
Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function (el) {
// the first argument (here: 'el') supplied to the function
// is the array-element (here a DOM node from the NodeList)
// from the array (NodeList) over which we're iterating.

    // using Function.prototype.apply() in order to specify
    // that 'this' in the function (centralEllipsis) will be
    // the supplied DOM node ('el'); the array is used to 
    // pass the arguments to the function, the empty object
    // is what will be the 'opts' variable in the function
    // called. It doesn't have to be there, it's simply left
    // in place to show how to pass arguments to the function,
    // and how to supply user-defined options to override the
    // the defaults:
    centralEllipsis.apply(el, [{}]);
});

function centralEllipsis(opts) {
  var settings = {
      'maxLength': 7,
      'ellipsis': '&hellip;',
      'writeToAttribute': 'data-originaltext'
    },
    _this = this;

  for (var prop in opts) {
    if (opts.hasOwnProperty(prop)) {
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    }
  }

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) {

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  }

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {
  centralEllipsis.apply(el, [{}]);
});
<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

External JS Fiddle demo, for experimentation.

To override the default settings, for example to set the maxLength to 4:

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {
  centralEllipsis.apply(el, [{
    'maxLength': 4
  }]);
});

function centralEllipsis(opts) {
  var settings = {
      'maxLength': 7,
      'ellipsis': '&hellip;',
      'writeToAttribute': 'data-originaltext'
    },
    _this = this;

  for (var prop in opts) {
    if (opts.hasOwnProperty(prop)) {
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    }
  }

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) {

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  }

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {
  centralEllipsis.apply(el, [{
    'maxLength': 4
  }]);
});
<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

External JS Fiddle demo, for experimentation.

Or to set the 'ellipsis' character to a '»' character (for example):

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {
  centralEllipsis.apply(el, [{
    'ellipsis': '&raquo;'
  }]);
});

function centralEllipsis(opts) {
  var settings = {
      'maxLength': 7,
      'ellipsis': '&hellip;',
      'writeToAttribute': 'data-originaltext'
    },
    _this = this;

  for (var prop in opts) {
    if (opts.hasOwnProperty(prop)) {
      settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];
    }
  }

  var prefixLength = Math.ceil(settings.maxLength / 2),
    suffixLength = settings.maxLength - prefixLength,
    originalText = _this.title = _this.textContent,
    prefix, suffix;

  if (settings.maxLength < originalText.length) {

    _this.setAttribute(settings.writeToAttribute, originalText);

    prefix = originalText.substr(0, prefixLength);
    suffix = settings.maxLength < 2 ? '' : originalText.substr(-suffixLength);

    _this.innerHTML = prefix + settings.ellipsis + suffix;
  }

}

Array.prototype.forEach.call(document.querySelectorAll('.midEllipsis'), function(el) {
  centralEllipsis.apply(el, [{
    'ellipsis': '&raquo;'
  }]);
});
<ul>
  <li class="midEllipsis">abcdefghijklm</li>
</ul>

External JS Fiddle demo, for experimentation.

References:

  • Array.prototype.forEach().
  • Conditional (Ternary) operator.
  • document.querySelectorAll().
  • Element.innerHTML.
  • Element.setAttribute().
  • Function.prototype.apply().
  • Function.prototype.call().
  • Node.textContent.
  • String.prototype.substr().
  • typeof operator.
like image 115
David Thomas Avatar answered Oct 01 '22 08:10

David Thomas