function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce 283Salesforce 283 

Wordwrap is not working in table in Visualforce PDF

Hi Guys,
   I developed one table in which each row(tr) has 3 td's. Here if i use more lengthy word in one td, the word is not getting into next line. I used wordwrap and overflow but not working in PDF. Please help me out this problem and observe bold words.

Sample Code:

<table style="width:90%;margin-left:5%;margin-right:5%;page-break-after:always;border:1px solid black;word-break: break-all;" cellspacing="0">
     <tr style="width:100%;border:1px solid black;">
       <td style="width:20%;text-align:center;border:1px solid black;word-break: break-all;table-layout:fixed;">
        <apex:outputlabel style="word-break: break-all;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</apex:outputlabel>
       </td>
       <td style="width:20%;text-align:center;border:1px solid black;">
        <apex:outputlabel >XXXXXXXXXXXX</apex:outputlabel>
       </td>
       <td style="width:60%;text-align:left;border:1px solid black;"><!------word-wrap: break-word;word-break:break-all;------->
        <table style="width:100%;">
         <tr>
          <td>
           <ul style="list-style-type:dots;">
                <li>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                </li>
                <li>
                 <apex:outputlabel style="word-break:keep-all;">XXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX</apex:outputlabel>
                </li>
           </ul>
          </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>
Antonio ManenteAntonio Manente
Does this work when not rendered in pdf? I mainly use 'word-wrap:break-word;' when trying to accomplish this.
Salesforce 283Salesforce 283
Hi Manente, It didn't work when not rendered in pdf also. Actually where can i mention word-wrap:break-word; in outputlabel or td or table. Regards, Mahesh.
Antonio ManenteAntonio Manente
I'd probably do something along the lines of this...
  
  • <table>
    <tr>
        <td>
            <div style='width:10%;word-wrap:break-word'>
                <apex:outputLabel>
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                </apex:outputLabel>
            </div>
        </td>
    </tr>
</table>
just wrapping the elements containing text in a div and set the word-wrap attribute there. 
  
<table style="width:90%;margin-left:5%;margin-right:5%;page-break-after:always;border:1px solid black;word-break: break-all;" cellspacing="0">
     <tr style="width:100%;border:1px solid black;">
       <td style="width:20%;text-align:center;border:1px solid black;word-break: break-all;table-layout:fixed;">
        <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
       </td>
       <td style="width:20%;text-align:center;border:1px solid black;">
        <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
       </td>
       <td style="width:60%;text-align:left;border:1px solid black;"><!------word-wrap: break-word;word-break:break-all;------->
        <table style="width:100%;">
         <tr>
          <td>
           <ul style="list-style-type:dots;">
                <li>
                <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
                </li>
                <li>
                 <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
                </li>
           </ul>
          </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>

Given your code sample I'd try to design it this way (forgive the spacing :) ). This should work for you.
Salesforce 283Salesforce 283
Hi Manente, I'd tried but it's not working. Have you tried in you org? Regards, Mahesh.
Antonio ManenteAntonio Manente
I just demo'd it in one of my orgs and it appears to be working fine... 

Full VF markup:  
<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
    
    <table style="width:90%;margin-left:5%;margin-right:5%;page-break-after:always;border:1px solid black;word-break: break-all;" cellspacing="0">
     <tr style="width:100%;border:1px solid black;">
       <td style="width:20%;text-align:center;border:1px solid black;word-break: break-all;table-layout:fixed;">
        <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
       </td>
       <td style="width:20%;text-align:center;border:1px solid black;">
        <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
       </td>
       <td style="width:60%;text-align:left;border:1px solid black;"><!------word-wrap: break-word;word-break:break-all;------->
        <table style="width:100%;">
         <tr>
          <td>
           <ul style="list-style-type:dots;">
                <li>
                <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
                </li>
                <li>
                 <div style='word-wrap:break-word'>
                 <apex:outputlabel style="overflow-wrap: break-word;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX</apex:outputlabel>
                    </div>
                </li>
           </ul>
          </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>
</apex:page>

This is what the result looks like...

http://www.screencast.com/t/br0Lfe4l


Side note:

These ( 
sidebar="false" showHeader="false" standardStylesheets="false" ) do not have to be false, it should work either way.. I just used that for this example
Salesforce 283Salesforce 283
Hi Manenta, Actually you are not using
. If you use it didn't come like that. Take th width is 20% and add more lengthy word without spaces in td it will extend the td but header is constant. Do as i said it shouldn't come as we expected. Regards, Mahesh.