the text overflows from the column while I set the width of the column

 <apex:repeat var="cases" value="{!Quote.QuoteLineItems}">
       <tr width="100%">
       <td  style="border-right:2px solid black;" width="10%">{!cases.Product2.ProductCode}
           <td style="border-right:2px solid black" align="left" width="50%">
            <td style="border-right:2px solid black;" width="10%">{!cases.Quantity}
            <td style="border-right:2px solid black;" width="10%">{!cases.ListPrice}
            <td style="border-right:2px solid black;" width="10%">{!cases.Discount}
            <td style="border-right:2px solid black;"  width="10%">{!cases.TotalPrice}

I Get This: enter image description here

1 Answer 1


You can try adding auto-hyphenation:

<td style="hyphens: auto; border-right:2px solid black" align="left" width="50%">

Or, you can truncate the text:

<td style="overflow: hidden; text-overflow: ellipsis; border-right:2px solid black" align="left" width="50%">

If you use the Salesforce Lightning Design System, it includes patterns for doing this automatically with slds-truncate.

Just add <apex:slds/> to your page, and set a scope for SLDS with <div class="slds-scope"> near the top of your page.

  • Thank you for your reply when I use this: <td style = "overflow: hidden; text-overflow: ellipsis; border-right: 2px solid black" align = "left" width = "50%"> it works for the first line but the other lines part of the designation is no longer displayed
    – maya
    Commented Aug 21, 2020 at 14:27
  • @maya You can try auto-hyphenation as an alternative, or just make sure that no word exceeds a number of characters. Your use case is rather contrived; most legitimate data shouldn't flow over into the next cell.
    – sfdcfox
    Commented Aug 21, 2020 at 14:43
  • thank you so much! sorry i know i ask too much! i need help displaying my table header on the second page if the table page breaks.?
    – maya
    Commented Aug 21, 2020 at 14:58
  • @maya no worries, check this out. Should be exactly what you need.
    – sfdcfox
    Commented Aug 21, 2020 at 15:02
  • thank you very much that works! Is there a way to translate the product description on the visualforce page?
    – maya
    Commented Aug 21, 2020 at 16:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .