I have created lightning layout component and made the lightning layout item size as 5. Inside the layout item I want place some dynamic text value. If the text value is larger it is crossing the box also the layout. How can I fit the text inside the box dynamically based on the length?

My dynamic text testingggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg


<lightning:layout multipleRows="true">
    <lightning:layoutItem size="12" mediumDeviceSize="5" class="border">
        <div class="slds-box">
            size=12, mediumDeviceSize=5.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2.slds-size_1-of-2
    <lightning:layoutItem size="12" mediumDeviceSize="5" class="border">size=12, mediumDeviceSize=5</lightning:layoutItem>

enter image description here Highlighted in yellow is out of the layout even though i fit the size

1 Answer 1


You just need to play with CSS of div element.

Check following examples:

Word Break

Word Wrap

You must log in to answer this question.

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