This post is a part of the daily blog series
A Tip A Day, daily dosage of learning!
Day #8 – Display Line Breaks of Long Text Area in a Visualforce page.
I have a field of type long text area called “Description” in Products object. The value of this is generally a couple of paragraphs or at least few bullet points explaining the Product in detail. I had a requirement to display the field in a Visualforce page.
Problem: When I display the field in Visualforce page, it displays a single long line, without any line breaks or paragraphs. I used <apex:outputText /> or <apex:outputField /> but the result is same without any formatting.
<apex:outputText value="{!item.Line_Description2__c}" />Solution:
I know we have used HTML Encode for this but that didn’t serve the full purpose because my description field is in an <apex:repeat /> table. After a lot of research and reading the help documents, I realized I need to add CSS white-space styling too so that the description is displayed within the column it is supposed to be.
Here’s the final working solution.
<apex:outputText value="{!HTMLENCODE(item.Line_Description2__c)}"
style="white-space:pre;" escape="false"/>More on HTML ENCODING
There are several functions that you can use for escaping potentially insecure strings.
- HTMLENCODE
- Encodes text and merge field values for use in HTML by replacing characters that are reserved in HTML, such as the greater-than sign (>), with HTML entity equivalents, such as >.
- JSENCODE
- Encodes text and merge field values for use in JavaScript by inserting escape characters, such as a backslash (\), before unsafe JavaScript characters, such as the apostrophe (‘).
- JSINHTMLENCODE
- Encodes text and merge field values for use in JavaScript inside HTML tags by replacing characters that are reserved in HTML with HTML entity equivalents and inserting escape characters before unsafe JavaScript characters. JSINHTMLENCODE(someValue) is a convenience function that is equivalent to JSENCODE(HTMLENCODE((someValue)). That is, JSINHTMLENCODE first encodes someValue with HTMLENCODE, and then encodes the result with JSENCODE.
- URLENCODE
- Encodes text and merge field values for use in URLs by replacing characters that are illegal in URLs, such as blank spaces, with the code that represents those characters as defined in RFC 3986, Uniform Resource Identifier (URI): Generic Syntax. For example, blank spaces are replaced with %20, and exclamation points are replaced with %21.
CSS Syntax – WHITE SPACE
Here’s some background on white-space styling for your reference from w3schools. You can change the wrap style as per your needs using the below table.
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
Property Values
| Value | Description | TRY |
|---|---|---|
| normal | Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary. This is default | Play» |
| nowrap | Sequences of whitespace will collapse into a single whitespace. The text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered | Play» |
| pre | Whitespace is preserved by the browser. The text will only wrap on line breaks. Acts like the <pre> tag in HTML | Play» |
| pre-line | Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary, and on line breaks | Play» |
| pre-wrap | Whitespace is preserved by the browser. The text will wrap when necessary, and on line breaks | Play» |
| initial | Sets this property to its default value. Read about initial | Play» |
| inherit | Inherits this property from its parent element. Read about inherit |
Read all other tips of the blog series here – A Tip A Day, daily dosage of learning!
sfdcFanBoy 
Im trying to display a dynamic values and cannot use apex:outputtext with it ,also render it on my pdf, please help
LikeLiked by 1 person
Thank you SO much! This worked perfectly in my table. So nice to be able to plug this right in to the page without having to use any kind of APEX class extension!
LikeLiked by 1 person
Awesome. Glad to know it is useful and worked for you.
LikeLike
Hi,
After implementing solution still facing the same issue, i am trying to wrap the long text area field into a table and displaying it on PDF the text not wrapping properly appearing on single line.
LikeLiked by 1 person
Maybe there is another styling on the table/columns. You can remove those and just have this styling and see if it renders right.
LikeLike