Justify text based on width of column width lightning design grid (slds)

Question

I have a lightning grid table in which I show some data. 1 of the values has a long text. How do I adjust this according to the max of the table width.

Grid:

     <p><b>{!opleiding.Opleiding__c}</b></p>                  
                <div class="slds-grid slds-gutters">
                    <div class="slds-col slds-size_2-of-12">
                        <span>Docent(e):</span><br/>
                        <span>Categorie:</span><br/>
                    </div>                     
                    <div class="slds-col slds-size_4-of-12">
                        <span>{!opleiding.Docent_e__r.Name}</span><br/>
                        <span>{!opleiding.Categorie__c}</span><br/>
                    </div>
                    <div class="slds-col slds-size_2-of-12" >
                        <span>Locatie:</span><br/>
                        <span>Diploma:</span><br/>
                    </div>               
                    <div class="slds-col slds-size_4-of-12">
                        <span>{!opleiding.Locatie__c}</span><br/>
                        <span>{!opleiding.Diploma__c}</span><br/>
                    </div>
                </div>

Result:

Answer 1

You can use the Hyphenation from SLDS.

The hyphenation class should be placed on text that might be served in narrow width containers and is not truncated.

<div class="slds-grid slds-gutters">
        <div class="slds-col slds-size_2-of-12">
            <span>Docent(e):</span><br/>
            <span>Categorie:</span><br/>
        </div>                     
        <div class="slds-col slds-size_4-of-12 slds-hyphenate">
            <span>cftdgbtrdrtrf566sdgfgjfbsdjbaSBbsafgbbekyhuikuy8iuily8u88liuiyguiyggykiyluyhhuhufghngbcftgbtcrfgfbntfvhfvbtygtbygvnhbgyyhmtgbujyxdfgxfgbdfdrthrfytfynrthf5tryrfthyngthf</span><br/>
            <span>tuyk7yghy7gytf</span><br/>
        </div>
        <div class="slds-col slds-size_2-of-12" >
            <span>Locatie:</span><br/>
            <span>Diploma:</span><br/>
        </div>               
        <div class="slds-col slds-size_4-of-12">
            <span>tfyu7gy68umky7</span><br/>
            <span>trfgyhtg</span><br/>
        </div>
    </div>

Your text will be wrap up.