How to make slds box fit for long text value inside lightning layout?

Question

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

Markup

<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
            testingggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
    </lightning:layoutItem>
    <lightning:layoutItem size="12" mediumDeviceSize="5" class="border">size=12, mediumDeviceSize=5</lightning:layoutItem>
</lightning:layout>

Highlighted in yellow is out of the layout even though i fit the size

Answer 1

You just need to play with CSS of div element.

Check following examples:

Word Break

Word Wrap