Topic: How to prevent Datatable from truncating column text.

tmdb priority asked 2 years ago

How to prevent data tables from truncating column text. It replaces excess text with "..." I would like it to wrap text instead so that all content in the column is visible.

penguin28 priority answered 2 years ago

Thank you very much Michael!

Michał Duszak staff answered 2 years ago

@max rioux

Here is the snippet:

I used this CSS:

.datatable table td {
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;

max rioux priority commented 2 years ago

Thanks, I can't put the status to resolved since I'm not the OP but you solved it !

max rioux priority answered 2 years ago

Is there a way to make the datatable acting the same way as the table?(Transforming text-overflow to multiline)

Michał Duszak staff answered 2 years ago

Try to add this in your styles:

.datatable table td, .datatable table th {
    text-overflow: unset;
    max-width: unset;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: MACOS
  • Browser: Chrome
  • Provided sample code: No
  • Provided link: No