Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show ellipsis(...) when data exceeds the column width in ngx-datatable

I am using ngx-datatable with Angular (https://swimlane.github.io/ngx-datatable/). Currently, my text gets cut when the data exceeds the column width. So, I want to show ellipsis and moreover, when user hovers over the ellipsis or the data, it should show the full details. Any help would be appreciated. trimmed text

like image 783
Kajal Arora Avatar asked Nov 27 '25 18:11

Kajal Arora


1 Answers

Well, as long as it's the same DOM structure in the example link you provided just add this CSS somewhere;

.datatable-body-cell-label {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
like image 86
Chris W. Avatar answered Dec 02 '25 02:12

Chris W.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!