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

am using kendo grid fixed width. if text more showing ellipsis. can differentiate rows based on end of string. due effect unable find it. so, need ellipsis in middle of text.

example:

abcdefghijklm abcdefg...  -> normal ellipse abcd...klm  -> want need type of output 

one approach follows, though – of course – rely on javascript:

function centralellipsis(opts) {      // default settings, can overridden     // user:     var settings = {         // number of original characters show:         'maxlength': 7,          // character-sequence, or html character-         // entity use replace missing characters:         'ellipsis': '&hellip;',          // attribute you'd write         // original text (this function write         // text 'title' attribute though):         'writetoattribute': 'data-originaltext'     },     // element upon we're working (cached    // because we'll access more once):     _this = this;      // iterating on properties supplied user:     (var prop in opts) {          // if current property ('prop') of object         // ('opts') enumerable , not prototype:         if (opts.hasownproperty(prop)) {              // update property in settings object             // (if typeof property-value ('opts[prop]')             // not equal string 'undefined', if             // use original property-value:             settings[prop] = 'undefined' !== typeof opts[prop] ? opts[prop] : settings[prop];         }     }      // divide settings.maxlength 2 work out     // how many characters should appear @ beginning     // of string; using math.ceil() ensure whole     // numbers:     var prefixlength = math.ceil(settings.maxlength / 2),          // finding length of suffix subtraction         // of prefixlength settings.maxlength:         suffixlength = settings.maxlength - prefixlength,          // setting textcontent of current element         // element's title text , storing in         // variable:         originaltext = _this.title = _this.textcontent,          // empty variables initialised later:         prefix, suffix;      // if maxlength less length of original     // text, go ahead (if not, nothing):     if (settings.maxlength < originaltext.length) {          // storing original text in specified attribute:             _this.setattribute(settings.writetoattribute, originaltext);          // prefix substring of originaltext,         // settings.maxlength number of characters starting @          // index 0 (the beginning of string):         prefix = originaltext.substr(0, prefixlength);          // if settings.maxlength less 2         // suffix empty string (''), otherwise it's         // substring of originaltext, using negative         // index takes last 'suffixlength'         // characters string:         suffix = settings.maxlength < 2 ? '' : originaltext.substr(-suffixlength);          // here set innerhtml (so can use html         // character-entities, such '&hellip;')         // prefix + settings.ellipsis character(s) + suffix:         _this.innerhtml = prefix + settings.ellipsis + suffix;     }  }  // using function.prototype.call() use array.prototype.foreach() // on array-like nodelist returned document.queryselectorall(): array.prototype.foreach.call(document.queryselectorall('.midellipsis'), function (el) { // first argument (here: 'el') supplied function // array-element (here dom node nodelist) // array (nodelist) on we're iterating.      // using function.prototype.apply() in order specify     // 'this' in function (centralellipsis)     // supplied dom node ('el'); array used      // pass arguments function, empty object     // 'opts' variable in function     // called. doesn't have there, it's left     // in place show how pass arguments function,     // , how supply user-defined options override     // defaults:     centralellipsis.apply(el, [{}]); }); 

function centralellipsis(opts) {    var settings = {        'maxlength': 7,        'ellipsis': '&hellip;',        'writetoattribute': 'data-originaltext'      },      _this = this;      (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, experimentation.

to override default settings, example set maxlength 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;      (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, experimentation.

or set 'ellipsis' character '»' character (for example):

array.prototype.foreach.call(document.queryselectorall('.midellipsis'), function(el) {   centralellipsis.apply(el, [{     'ellipsis': '»'   }]); }); 

function centralellipsis(opts) {    var settings = {        'maxlength': 7,        'ellipsis': '&hellip;',        'writetoattribute': 'data-originaltext'      },      _this = this;      (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, 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.