Hi Suraj
Difference between Slds-has-flexi-truncate and Slds-truncate is given below:
Slds-truncate
- Usage: It can be applied to:- Any element
- Outcome:Creates truncated text
- Required:No, optional element or modifier
- Comments:Truncation will occur at the parent width if a width is not specified
Slds-has-flexi-truncate
- Usage:It can be applied to:.slds-col
.slds-col–padded
- Outcome:Allows truncation in nested flexbox containers
- Required:No, optional element or modifier
- Comments:This class is placed on a parent element that contains a flexbox element containing .slds-truncate. For example — for a media object that is nested in a grid column and contains truncation — the grid column would require this class.
Hope it may help you: