function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
jojoforcejojoforce 

How to slds-truncate within an HTML Table

Essentially, the task subject or the Account Name should be truncated when its too long but here is what is happening in my component. Any advice on how to use the sdls-truncate css?
 
<table class="slds-table slds-no-row-hover">
                    <tbody>
                        <aura:iteration items="{! v.tasks }" var="task">
                            <tr class="slds-hint-parent">
                                <td class="slds-text-align_left" style="width:30px;">
                                    <lightning:input type="checkbox" label="Checkbox Label" variant="label-hidden"></lightning:input>
                                </td>
                                <td class="slds-text-align_left">
                                    <div class="slds-grid slds-truncate_container_33"  >
                                        <span class="slds-truncate" title="{!task.Subject}">
                                            <a target="_blank" class="slds-text-link" href="" onclick="{! c.handleTaskLink }" data-taskid="{!task.Id}">
                                                {!task.Subject}
                                            </a>            
                                        </span>
                                    </div>
                                </td>
                                <td class="slds-text-align_right">
                                    <div class="slds-grid"  >
                                        <span class="slds-truncate" title="{!task.Account.Name}">
                                            <a target="_blank" class="slds-text-link" href="" onclick="{! c.handleAccountLink }" data-accountid="{!task.AccountId}">
                                                {!task.Account.Name}                                    
                                            </a>    
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        
                        </aura:iteration>
    
                    </tbody>
                </table>

User-added image
Abhishek BansalAbhishek Bansal
Hi Jojo,

Can you try using the same class on <a> tag like this:
<a target="_blank" class="slds-truncate slds-text-link" href="" onclick="{! c.handleAccountLink }" data-accountid="{!task.AccountId}">

Thanks,
Abhishek Bansal.
ANUTEJANUTEJ (Salesforce Developers) 
Hi Jojo,  

As mentioned in the below link 
>> https://developer.salesforce.com/forums/?id=9062I000000g3u1QAA

Can you see if it works if you try the below code:

<p class="slds-truncate" title=" {!task.Account.Name} "> {!task.Account.Name} </p>

I hope this helps and in case if this comes handy can you please choose this as best answer so that it can be useful for others in the future.

Regards,
Anutej
jojoforcejojoforce
I tried both approaches unfortunately, it did not work. Thank youf for trying.
Abhishek BansalAbhishek Bansal
In order to debug the issue we need the access to your org. If possible please reach out to me directly on:
Gmail: abhibansal2790@gmail.com
Skype: abhishek.bansal2790