How to truncate a long text field and fix column width in DataTables

Asked Oct 01 '19 at 13:38

Active Oct 01 '19 at 13:38

Viewed 2,084 times

I have a column in my DataTable that is a text field currently wrapped to multiple lines. I want to create a DataTable with the following properties:

The text of each record takes one row (no wrapping)
The columns are each a fixed length (variable by column)
No side scrolling (scrollX: false)
Overflowing text is replaced with an ellipsis ...

I've tried modifying the css as such, but the columns expand beyond the pixel width I've defined to be as wide as possible and no text is truncated with ...

th, td {
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

asked Oct 01 '19 at 13:38

TomNash

3,147
2
21
57

2

Possible duplicate of https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell and https://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell – Constantin Groß Oct 01 '19 at 13:42
2

Possible duplicate of [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) – TomNash Oct 01 '19 at 13:48
Have you read this: https://datatables.net/blog/2016-02-26 – Muhammad Afaq Riaz Oct 01 '19 at 15:32
I had to set the `max-width` property then it worked. – TomNash Oct 01 '19 at 15:34

How to truncate a long text field and fix column width in DataTables

0 Answers0