Need to wrap url inside lightning card

Question

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>   
                                    <br/>
                                    <lightning:formattedUrl class="slds-truncate" value="{!v.companyEditField.Employer_Microsite_Link__c}" />
                                    <br/>
                                    <label lightning-input_input="" for="input-25" class="slds-form-element__label slds-no-flex">Employee Microsite Link</label>   
                                    <br/>
                                    <lightning:formattedUrl class="slds-truncate" value="{!v.companyEditField.Employee_Microsite_Link__c}" />
                                </div>
                            </lightning:card>

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

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.