I m a newbie in Salesforce, and I have a quite simple question. I have a text that I display in a div element, but my problem is that when my text is too long, it overflows the screen.
however, from what I read about the properties of the CSS applied, my text should normally do a line feed depending on the type of screen used (desktop, phone)
Does anyone have a solution, please?
here my code
<div class="slds-card">
<lightning:layout horizontalAlign="spread" multipleRows="true">
<lightning:layoutItem flexibility="grow" size="12">
<div class="slds-page-header">
<header class="slds-media slds-media_center slds-has-flexi-truncate" style="{!v.backgroundColor}">
<div class="slds-media__figure">
<lightning:Icon iconName="standard:record" size="small"
class="slds-icon slds-input__icon slds-input__icon_left " />
</div>
<div class="slds-media__body">
<h2>
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Invoice List">
<div class="slds-text-heading_small"> Offene Rechnungen zugzuguz uzuhzuzuz ugzugz ugzugzugz: <ui:outputCurrency aura:id="curr" value="{!v.totalAmount}" format="###,###,###.##"/> </div>
<div class="slds-text-body_regular"> <lightning:formattedText value="{!v.msg}" /> </div>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<div class="input-group">
<lightning:input type="toggle" label="Rechnungen mit überfälligem Datum anzeigen" messageToggleActive="Anzeigen" messageToggleInactive="Nicht anzeigen" name="inputSelectable" checked="{!v.showOutToDateInvoices}" onchange="{!c.doInit}"/>
</div>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<lightning:input value="{!v.quoteSearchValue}" placeholder="Suche eine rechnungsnummer..." type="text" label="" name="Quote Search" onchange="{!c.doInit}"/>
</div>
</div>
</div>
here my result