I am not able to truncate a long text area field {! consult.Situation__c }
when displayed in a Lightning component:
<aura:component controller="ConsultationListViewByOperatorCtrl" description="ConsultationListViewByOper" implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:attribute name="Consultation" type="Consultation__c[]" access="global" />
<aura:attribute type="Boolean" name="sortAsc" />
<aura:attribute type="String" name="sortField" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="recordId" type="String" />
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped">
<thead>
<tr class="slds-text-title_caps">
<th scope="col" class="slds-text-title--caps">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Name">Contact</div>
</th>
<th scope="col" onclick="{!c.sortByOper}">
<div class="slds-truncate" title="Operator">Operator</div>
</th>
<th scope="col">
<div class="slds-truncate" title="outcome">Outcome</div>
</th>
<th scope="col">
<div class="slds-truncate" title="status">Status</div>
</th>
<th scope="col" onclick="{!c.sortByFUp}" >
<div class="slds-truncate" title="Follow Up">Follow-Up?</div>
</th>
<th scope="col" class="slds-size--1-of-7 slds-has-flexi-truncate" >
<div class="slds-truncate" title="Stage">Situation</div>
</th>
</tr>
</thead>
<tbody >
<aura:iteration var="consult" items="{!v.Consultation}">
<a onclick="{!c.navigate}" data-value="{!consult.Id}">
<tr >
<td data-label="Name" scope="row" >
<div class="slds-truncate" title="Name" >{! consult.Name }</div>
</td>
<td data-label="Contact" scope="row" >
<div class="slds-truncate" title="Client" >{! consult.Client__r.Name }</div>
</td>
<td data-label="Operator" scope="row" >
<div class="slds-truncate" title="Operator" >{! consult.Operator__r.Name }</div>
</td>
<td data-label="Outcome" scope="row" >
<div class="slds-truncate" title="Outcome">{! consult.Outcome__c }</div>
</td>
<td data-label="Status" scope="row">
<div class="slds-truncate" title="Status">{! consult.Status__c }</div>
</td>
<td data-label="Follow up?" scope="row" >
<div class="slds-truncate" title="Status">{! consult.Follow_up_required__c }</div>
</td>
<td data-label="Situation" class="slds-size--1-of-7" scope="row">
<div class="slds-truncate" title="{! consult.Situation__c }">{! consult.Situation__c }</div>
</td>
</tr>
</a>
</aura:iteration>
</tbody>
</table>