I am using lightning:formattedUrl to show the url.

I don't want give label to this url, so the url should show iin raw format.

However I am using it in card, and it is going beyond the card boundary.


                                <lightning:card title="Microsite Links" iconName="standard:link" variant="base" class="slds-card_boundary">
                                <div class="slds-card__body_inner">

                                    <label lightning-input_input="" for="input-25" class="slds-form-element__label slds-no-flex">Employer Microsite Link</label>   
                                    <lightning:formattedUrl class="slds-truncate" value="{!v.companyEditField.Employer_Microsite_Link__c}" />
                                    <label lightning-input_input="" for="input-25" class="slds-form-element__label slds-no-flex">Employee Microsite Link</label>   
                                    <lightning:formattedUrl class="slds-truncate" value="{!v.companyEditField.Employee_Microsite_Link__c}" />

I have tried slds-wrap and slds-truncate on lightning:formattedUrl.

1 Answer 1


You need to place the slds-truncate on the parent element instead:

<div class="slds-card__body_inner slds-truncate">

Everything else should work just fine with this change.

Here's an example in LWC, but the principle is the same for Aura.

  • Thanks Brian.. it worked :)
    – mvk1991
    Commented Sep 29, 2019 at 7:55

You must log in to answer this question.

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