Apply ellipsis in table column with different width according to the data in specific column

Question

I want to apply ellipsis in columns with different widths according to the data that is going in a specific column e.g 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.

score 2 · Answer 1 · answered Jun 01 '16 at 06:54

2

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

answered Jun 01 '16 at 06:54

brk

48,835
10
56
78

i don't want to apply max-width:60 for all column i want to use it on dynamic way please read question carefully!!! – Shahid Ahmad Jun 01 '16 at 07:12
What do you mean by dynamic way. If width is dynaimc then how will apply ellipsis. The puprose of ellipsis is to show dots instead of truncation – brk Jun 01 '16 at 07:36
Make this things in Javascript is overkill. It's better the CSS solution. If you can put a `
` without classname inside all `` you can specify `max-width: 100%` and all will be dynamic: `
Your long content
` || CSS: `td div { text-overflow: ellipsis; white-space:nowrap; overflow: hidden; max-width: 100%; }`. Voilà
– Marcos Pérez Gude Jun 01 '16 at 07:52
As you can see above some column contain 3 character and some column contain 200 character simply i want that if column contain 3 character then it's max-width should be smaller than the column that contain 200 character.i want to assign max width on the basis of character in a column the above solution doesn't work for me i already try that – Shahid Ahmad Jun 01 '16 at 07:57

score 2 · Answer 2 · edited May 23 '17 at 12:33

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)+'&hellip;' : 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_ + '&hellip;' : s_;
      };

Usage:

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

Apply ellipsis in table column with different width according to the data in specific column

2 Answers2