Book Free Consultation
Word-wrap Is Not Working In Visualforce PDF
Techniques for Handling Word Wrapping Issues in Visualforce PDF Generation When Displaying Long Text Content Such as Descriptions or Comments
By Nishanth Sargunam
Senior Salesforce Developer
Word-wrap Is Not Working In Visualforce PDF
Issue Trying to Resolve
I have a table built within a Visualforce page, which is then rendered as a PDF. Some columns contain long, continuous text without white spaces, but the text fails to wrap properly inside the cell, causing it to overflow into the next column. Despite trying various CSS properties, none seem to resolve the issue. Is there any CSS that can break a long line of text into multiple lines?
Error Behavioral
After applying multiple CSS to overcome the text wrap for long text fails and shows the table collision as posted below.
Solution
As the customized solution, consider the following custom code. It is designed to insert white space at your desired positions, ensuring that the string maintains proper formatting beyond a specified threshold length. You can customize the amount of white space inserted based on your requirements.
public class WhiteSpaceInsertion {
public string strProductName {get;set;}
private static final Integer intWordLengthThreshold = 20;
public WhiteSpaceInsertion(){
strProductName = insertWordSpaces('Product_Test_PRD_CDE-098756TDCD128ADF-ThrillerSeriesAY');
}
public static String insertWordSpaces(String strInputText) {
String strResult = '';
if (String.isBlank(strInputText) || intWordLengthThreshold <= 0) {
return strInputText;
}
List<String> lstWords = strInputText.split(' ');
for (String strWord : lstWords) {
if (strWord.length() > intWordLengthThreshold) {
for (Integer i = 0; i < strWord.length(); i++) {
strResult += strWord.substring(i, i + 1);
if (Math.mod(i + 1, 10) == 0) {
strResult += ' ';
}
}
strResult += ' ';
} else {
strResult += strWord + ' ';
}
}
return strResult.trim();
}
}<apex:page controller="WhiteSpaceInsertion" renderAs="pdf">
<head>
<style>
.setWidth{
width : 300px!important;
word-wrap: break-word!important;
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding = "0" cellspacing = "0">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Description</th>
</tr>
</thead>
<tr>
<td class="setWidth">PRD_CDE-098756TDCD128ADF</td>
<td class="setWidth">{!strProductName}</td>
<td class="setWidth">It is a test product which is used to explain the field tech about the product specification.</td>
</tr>
</table>
</body>
</apex:page>
Output
