A Tip A Day #8 – Display Line Breaks of Long Text Area in VF Page

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 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 about the Product in detail.  I had a requirement to display the field in 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 use HTML Encode for this but that didn’t serve the full purpose because my description field is in an <apex:repeat /> table.  After 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 &gt;.
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 represent 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 back ground 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. Text will wrap when necessary. This is default Play»
nowrap Sequences of whitespace will collapse into a single whitespace. 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. 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. Text will wrap when necessary, and on line breaks Play»
pre-wrap Whitespace is preserved by the browser. 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!

Advertisements

One Reply to “A Tip A Day #8 – Display Line Breaks of Long Text Area in VF Page”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s