Not able to word wrap text inside data table in Lightning

Question

I am trying to word-wrap the text in the first column of the table within a width of 50 %. I have tried using the table layout fixed and the word-wrap:break-word but to no use. The text still shows in a single line.

Component

<table style="height:400px;"  class="slds-table slds-table--bordered slds-max-large-table--stacked-horizontal slds-table_striped " >
        <thead>
          <tr class="slds-text-title--caps" style="background-color: gainsboro;">
              <th scope="col"  style="width: 50%;">
                <div class="slds-truncate" title="Client Value Potential" style="font-weight: bold;">Fox Evaluator</div>
              </th>
              <th scope="col" colspan="6" style="text-align: center;width: 50%;">
                <div class="slds-truncate" title="Option Name" style="font-weight: bold;">Scale</div>
              </th>
          </tr> 
       </thead> 

        <tbody> 
              <tr>
                    <td style="width:100px; word-wrap:break-word;" scope="row"  data-label="Fox Question">
                      <div class="slds-truncate">

                         <ui:outputText value="{!v.qstList.Contact.FirstName}"/>&nbsp;<ui:outputText value="{!v.questionA}"/> 

                      </div>
                    </td>
                    <td data-label="Option Name" style="text-align: center;">                
                      <img style="width:20px;cursor:pointer;display: inline-block;" data-contact="{!v.qstList.Id}" data-id="1" id="{!'leftClick1' + v.qstList.Id}" class=""  src="{!$Resource.OA+ '/Icons/leftIcon.png'}" onclick="{!c.handleLeftClick}"/>
                      <div style="display: inline-block;width: 25%;"><p id="{!'aFox1' + v.qstList.Id}" align="center" style="">-Choose Scale-</p> </div>
                      <img style="width:20px;cursor: pointer;" data-contact="{!v.qstList.Id}" data-id="1" id="{!'rightClick1' + v.qstList.Id}" class="disabled" src="{!$Resource.OA+ '/Icons/rightIcon.png'}" onclick="{!c.handleRightClick}"/>

                      <img src="{!$Resource.OA+ '/Icons/help.png'}" id="1" height="16" width="16" class="helpOrb" 
                         onclick=""/>
                    </td> 

              </tr>    
        </tbody>
 </table>

This now looks

How I want it to show is something like

Answer 1

First, you're using slds-truncate, which causes "..." when an element overflows. Remove this from your code. Secondly, do not use tables, as they are unreliable. The data table version is awfully unpredictable and not supported in S1 mobile, either. Using the standard Grid will give you perfect flexibility across all devices in a reliable manner.

Here's a copy-paste example that you can use to get started:

<aura:application extends="force:slds">
    <div class="slds-grid">
        <div class="slds-size_1-of-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis ipsum eros. Donec sed odio in nisl imperdiet dapibus convallis eget tellus. In hac habitasse platea dictumst. Donec dapibus mauris hendrerit massa elementum venenatis. Mauris elit odio, vestibulum quis risus vel, vehicula fringilla quam. Sed sed elit ac orci eleifend cursus eu sit amet nulla. Morbi gravida tortor nec sapien semper, a sodales erat accumsan. Fusce vel libero mauris. Sed faucibus nec augue et maximus.
        </div>
        <div class="slds-size_1-of-3">
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis lobortis sodales. In sagittis, libero eu ornare ultrices, urna leo rutrum lectus, eget gravida neque felis eget sem. Curabitur lacinia neque id magna ullamcorper, vel posuere ligula vestibulum. Sed eu cursus tortor. Donec ullamcorper magna ut purus vestibulum porttitor. Vestibulum consectetur ultricies mi, id porta magna rutrum id. Aliquam laoreet nisl non magna facilisis aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mollis massa cursus quam viverra, eu consequat arcu efficitur.
        </div>
        <div class="slds-size_1-of-3">
            Sed ligula mauris, dignissim quis purus eu, lacinia euismod massa. Nulla lacinia, nisi vitae consequat auctor, diam risus ullamcorper turpis, non mollis nisi elit vitae ipsum. Vivamus condimentum, mi nec mollis malesuada, tellus odio placerat ipsum, ac rhoncus libero tellus non mi. Nullam feugiat neque eu rhoncus vulputate. Sed leo justo, pellentesque non bibendum at, auctor eget erat. Aenean vulputate vestibulum arcu non tempor. Nunc lobortis pharetra nulla convallis pretium. Nunc ultricies, lacus eleifend rutrum vestibulum, nisi ligula commodo tortor, eget suscipit tortor ante eget purus. Ut a justo semper, auctor ligula sit amet, auctor lorem. Mauris tincidunt vehicula arcu in lobortis. Nunc sed eros diam. Fusce commodo lorem non lacinia facilisis. Vestibulum et accumsan odio. Sed a odio sit amet diam tincidunt euismod. Praesent efficitur purus est, eu ullamcorper quam finibus eu.
        </div>
    </div>
</aura:application>

You can use all kinds of various ratios to design the perfect grid for your purpose, such as 1-of-2, 1-of-4, 2-of-12, etc. Just keep your ratios set to a combination of fractions that add up to 100% and the grid takes care of the rest for you.