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

word-wrap not working with renderas pdf

I am trying to create a professional PDF document using standard APEX and HTML properties to create my content.

I am facing issue with the word-wrap property of CSS as it is misbehaving.


Let me explain

I am trying to display the contents of a field in a table (around 7 columns) and render it as pdf. Regardless of what I try, i cannot get the word-wrap to break the word so that the text does not go beyond the container.


Here is the code

<table class="tableStyle" >
<th width="5%" style="color:#FFFFFF;" align="center"><div id="inner">#</div></th>
<th width="30%" style="color:#FFFFFF;"><div id="inner">Field</div></th>
<th width="15%" style="color:#FFFFFF;"><div id="inner">Type</div></th>
<th width="30%" style="color:#FFFFFF;"><div id="inner">Values</div></th>
<th width="10%" style="color:#FFFFFF;"><div id="inner">Default Value</div></th>
<th width="10%" style="color:#FFFFFF;" align="center"><div id="inner">Track History</div></th>
<apex:repeat value="{!customObject.fields}" var="field">
<td width="5%" align="center"><div id="inner">{!FLOOR(count)}</div></td>
<td width="30%"><div id="inner">{!field.label} ({!field.fullName})</div></td>
<td width="15%"><div id="inner">{!field.type}</div></td>
<td width="30%">
<div id="inner">
<apex:repeat value="{!field.values}" var="value">
<td width="10%"><div id="inner">{!field.defaultValue}</div></td>
<td width="10%" align="center">
<div id="inner">
<apex:image value="{!URLFOR($Resource.DesignDocument, IF(field.trackHistory, 'images/checkbox/checkbox_checked.gif', 'images/checkbox/checkbox_unchecked.gif'))}"/>
<apex:variable var="count" value="{!count+ 1}"/>


and here is the css
table.tableStyle {
width: 100%;
border-collapse: collapse;
background-color: white;
table-layout: fixed;
#inner {
border-width: 0em;
margin: 0em;
word-wrap: break-word;
overflow: inherit;
td, tr, th{
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 0.9em;
align: left;
vertical-align: top;
word-wrap: break-word;


Here is the kicker -
When I render this table in visualforce as pdf, the content overflows and gets clipped (due to overflow:hidden) if i dont specify the overflow:hidden property, it spills over in the next <td> block


But when i take the renderas pdf away from the page, the content wraps properly. Could you tell me how to resolve this issue?




I am also facing the same issue. Did you find any workaround to resolve this issue.





I am facing the same problem: word-wrap:break-word and word-break:break-all are not working with renderas pdf.

Is there any solution to this issue.

Jeff LupJeff Lup
I am experiencing the same problem.  Did anyone come up with a solution for this?
Nupur ModiNupur Modi
Was anyone able to find a fix for this issue?
The problem is that the pdf renderer engine does not support CSS3 as of yet. The problem seems to exist only if there is a word without spaces that is longer than the specified column width. A workaround I found, is to manually break the column content and surround its parts with span tags and then apply a css class to the spans with float:left;

For example the following string:
will become:
So if you have a column that only 10 characters can fit you will get two lines:
You could easily create a method to manipulate long stings without spaces and specify every how many number of charactes that you want it to brake.

Hope this helps.
Saurabh Gupta 3345Saurabh Gupta 3345
Hi All

Does anyone has a solution for this ?
I am using page block table on VF page render as PDF but its not working 

I am using below style 

overflow-wrap: break-word; 
word-wrap: break-word;
word-break: break-word;