How to work with ellipsis in bootstrap responsive table

Question

In a responsive table text-overflow:ellipsis is not working when the data increases in the th (as the col-xs-2 width increases).

Answer 1

With Bootstrap 4, you can use the .text-truncate class. It automatically adds these styles for the relevant components.

.text-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

then you can set the max-width for the element to get more reliable output.