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

Question

We use a fixed-width kendo grid. If the text is larger, then it shows the ellipsis. But I can distinguish between lines based on the end of the line. Because of this effect, I cannot find it. So I need an ellipse in the middle of the text.

Example:

abcdefghijklm abcdefg... -> Normal Ellipse abcd...klm -> I Want need this type of output 

Answer 1

One approach is as follows, although it does - of course, ndash; 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': '&hellip;', // 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 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 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 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 set the symbol 'ellipsis' to '& raquo;' 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; 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.

Literature:

• Array.prototype.forEach() .
• Conditional (triple) operator .
• document.querySelectorAll() .
• Element.innerHTML .
• Element.setAttribute() .
• Function.prototype.apply() .
• Function.prototype.call() .
• Node.textContent .
• String.prototype.substr() .
• typeof operator .

Answer 2

You added css and javascript tags, so I came up with a workaround that implies both languages.

You can try the following workaround:
1. Substract in variable_a all characters except the last three. Substract in variable_b last three characters.
2. Throw variable a into the span using elipsis.
3. Immediately after the first pass, add another without elipsis and fill it with the last three characters (variable_b)