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 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 &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 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!

Advertisements

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

  1. 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.

    Liked by 1 person

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s