根据特定列中的数据在表列中使用省略号，并使用不同的宽度

Question

I want to apply ellipsis in columns with different widths according to the data that is going in a specific column eg some columns contain 25 characters and some contain 500 characters.

I want a solution using javascript, because this time it contains a 7 column grid, but sometimes it may contain 4,5 or 6 columns.

Note: Table should be responsive.

Answer 1

You can do it using only CSS

td{
max-width: 60px; // change as per requirement
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;;
}

Check here for Demo

Answer 2

A nice JS solution is provided in the answer by KooiInc in this question .

Simple truncation:

String.prototype.trunc = String.prototype.trunc ||
      function(n){
          return (this.length > n) ? this.substr(0,n-1)+'…' : this;
      };

Usage:

var s = 'not very long';
s.trunc(5); //=> not ...

Or last word boundary:

String.prototype.trunc =
     function( n, useWordBoundary ){
         var isTooLong = this.length > n,
             s_ = isTooLong ? this.substr(0,n-1) : this;
         s_ = (useWordBoundary && isTooLong) ? s_.substr(0,s_.lastIndexOf(' ')) : s_;
         return  isTooLong ? s_ + '…' : s_;
      };

Usage:

var s = 'not very long';
s.trunc(11,true) //=>not very...