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
Akhil Katkam 5Akhil Katkam 5 

how to make this text to be aligned in correct manner

Hi Developer Community , 

i have an issue , i am displaying a record field value which is having a large text , but the text is crosssing the component and displaying in a out of orderUser-added imagehere u can see the first row of key message where the text is crossing the component and not displaying correctly , can anyone please tell me where to write the size of this row to control or manage it 
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
   <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">Persona</th>
      <th scope="col" >Key Message</th>
       </tr>
         </thead>
           <tbody>
    <aura:iteration items="{!v.Competition}"  var="comp">
       
        <tr scope="row">
            <td>{!comp.ciboostc1501__Persona1__c}<br/><br/>{!comp.ciboostc1501__Persona2__c}<br/><br/>{!comp.ciboostc1501__Persona3__c}</td>      
            <td>{!comp.ciboostc1501__Key_message_1__c}<br/><br/>{!comp.ciboostc1501__Key_message_2__c}<br/><br/>{!comp.ciboostc1501__Key_message_3__c}</td>
       
            </tr>
    
 </aura:iteration>
         </tbody>
          </table>

this is the code , please let me knopw how to stop crossing that line and should be displayed with in the component

Thanks in Advance
Best Answer chosen by Akhil Katkam 5
CharuDuttCharuDutt
Hii Akhil KatKam
Try Below Code Changes Are In Bold
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
   <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">Persona</th>
      <th scope="col" >Key Message</th>
       </tr>
         </thead>
           <tbody>
    <aura:iteration items="{!v.Competition}"  var="comp">
       
        <tr scope="row">
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Persona1__c}<br/><br/>{!comp.ciboostc1501__Persona2__c}<br/><br/>{!comp.ciboostc1501__Persona3__c}</td>      
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Key_message_1__c}<br/><br/>{!comp.ciboostc1501__Key_message_2__c}<br/><br/>{!comp.ciboostc1501__Key_message_3__c}</td>
       
            </tr>
    
 </aura:iteration>
         </tbody>
          </table>
Please Mark The Answer If It Helps
Thank you!

 

All Answers

CharuDuttCharuDutt
Hii Akhil KatKam
Try Below Code Changes Are In Bold
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
   <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">Persona</th>
      <th scope="col" >Key Message</th>
       </tr>
         </thead>
           <tbody>
    <aura:iteration items="{!v.Competition}"  var="comp">
       
        <tr scope="row">
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Persona1__c}<br/><br/>{!comp.ciboostc1501__Persona2__c}<br/><br/>{!comp.ciboostc1501__Persona3__c}</td>      
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Key_message_1__c}<br/><br/>{!comp.ciboostc1501__Key_message_2__c}<br/><br/>{!comp.ciboostc1501__Key_message_3__c}</td>
       
            </tr>
    
 </aura:iteration>
         </tbody>
          </table>
Please Mark The Answer If It Helps
Thank you!

 
This was selected as the best answer
Akhil Katkam 5Akhil Katkam 5
Thank you CharuDutt , thanks for your solution