Datatable fixed characters in Row

Question

How can i fixed number of character in a row then shwoing three dot (Like "some text...")

Example :

|Name          |   Age   |Description    |
+-------+---------+----------------------+
|Alice         | 34      | abcderh zyz...|
+-------+---------+----------------------+ 
|Robert La...  | 34      | Sometext is...|

If you able to analyze "Sometext is..." and after is/La it is showing three dots instead of full character/String. how can do it for single as well all column.

I have try a lot on Google but still not able to find any helpful tutorials over this problem.

my Code:

$(document).ready(function() {
    $('#example').dataTable();
} );

I have tried all these link:

jQuery DataTable overflow and text-wrapping issues

jQuery DataTables issue: columns and rows not in one line

but all it did't go through my problem. please help me guys.

Jai · Answer 1 · 2014-05-19T12:07:58.010

2

You need text-overflow: ellipsis; or text-overflow: "..."; to be set in your css:

td{
  text-overflow: ellipsis; // this is producing "..."
  white-space: nowrap;
  overflow: hidden;
}

Or more contextual:

#example td{
  text-overflow: ellipsis; // this is producing "..."
  white-space: nowrap;
  overflow: hidden;
}

Docs for text-overflow @ MDN

edited May 19 '14 at 12:07

answered May 19 '14 at 11:12

Jai

74,255
12
74
103

1

_CSS_ is always a better way to go than _JavaScript_ when such a simple solution is available – Paul S. May 19 '14 at 11:14
@PaulS absolutely correct!...i love to try using less js as possible. – Jai May 19 '14 at 11:16
thanks for Your answer, but it will not producing "..." – Lavekush Agrawal May 19 '14 at 11:52
It will turn all row into single column but still "..." is missing how can i decide width of column then after it will gives me "...". – Lavekush Agrawal May 19 '14 at 11:57
Then you can use this: `text-overflow: "...";` – Jai May 19 '14 at 12:05

Datatable fixed characters in Row

1 Answers1

Docs for text-overflow @ MDN