I have an Aura component showing a Lightning Datatable with some columns. I'm using Word wrap to fit/read the table contents within the table.

But the issue is whenever user is increasing the browser size, only the column headers are oveflowing as shown below.

enter image description here

How to fix this ? How to make the column headers to stay within the column bar ? I have tried almost all the alternatives to fix the position of column headers with no luck.

I'm currently using below css for the word wrap.

/*Word wrap the cell content and column header*/
.THIS .slds-truncate {
    text-overflow: inherit;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word; 

Please help me on this.

1 Answer 1


You're not meant to use wrapping on the headers. That's what slds-truncate does; it cuts the label off short when it's too long. You can add word-break: keep-all to try and prevent the unnecessary breaks, but the labels may overflow the cell header into the next cell.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .