JSF – Render Line Breaks in the outputText Tag

by Michael Scepaniak on October 27, 2010 in software development

Like many things having to do with JSF, it can be difficult to figure out how to render a line break (AKA new line) in the content of an outputText tag. This has come up most frequently for me when I want to narrow the width of a table column by breaking the heading content into one or more lines. For example:

<h:column>
    <h:outputText value="Very Wordy Table Column Heading" />
</h:column>

Your first (and last) thought might be to insert a line break tag (escaped, of course, so as not to break the XML formatting) in the content, like so:

<h:column>
    <h:outputText value="Very Wordy&lt;br /&gt;Table Column&lt;br /&gt;Heading" />
</h:column>

But, this don’t work:

Very Wordy<br
/>Table Column<br
/>Heading

Actually, this isn’t far off. The key is to disable output escaping using the escape attribute of the outputText tag, like so:

<h:column>
    <h:outputText value="Very Wordy&lt;br /&gt;Table Column&lt;br /&gt;Heading" escape="false" />
</h:column>

This works:

Very Wordy
Table Column
Heading

What’s going on here? By default, the outputText tag escapes HTML tags, which is great because it helps prevent injection attacks. What we’re telling the outputText tag to do is not do that. So, it follows that you shouldn’t do this when dynamic, possibly unsafe content is being passed to the outputText tag.

Hope this helps.

Mike
Want to be notified when new articles are posted?
Enter your email address:

{ 30 comments… read them below or add one }

sergo November 7, 2011 at 4:07 pm

Thank you! Really helps me.
Ugly escape=”false”….

Reply

Michael Scepaniak November 7, 2011 at 4:32 pm

You’re welcome, Sergo!

Mike….

Reply

Alex January 5, 2012 at 6:06 pm

Thanks, it really helped me!

Reply

Michael Scepaniak January 5, 2012 at 11:18 pm

Great to hear, Alex. I appreciate it.

Mike….

Reply

Athar January 11, 2012 at 7:29 pm

I am using richfaces and
I tried it with
h:outputText value=”#{someBean.someValue}” escape=”false”
did not work for me

in bean someValue is “Very Wordy<br />Table Column<br />Heading”

it shows Very WordyTable ColumnHeading

Reply

Michael Scepaniak January 11, 2012 at 11:00 pm

@Athar Try replacing every “< " with "& lt;" and every ">” with “& gt;” (removing the spaces after the ampersands).

Mike….

Reply

Virgie October 15, 2013 at 1:10 pm

Didn’t work either.

Reply

Michael Scepaniak December 19, 2013 at 8:01 pm

Are you using JSF v1 or v2? I’ve only ever tried this with v1.x.

Mike….

Reply

Hauke January 26, 2012 at 9:10 pm

Hello,

thanks for your post but it isn’t working for me as well. I have a textarea where I can input some text and it will be saved in a text-field (@Lob) in database.
If I load the text into my textarea again the linefeeds are fine.

If I output the content in a the line feeds will be ignored.

So I did the following method (I didn’t find any better solution in the hurry)

String content = selectedInterface.getKurzbeschreibung();
StringBuffer buffer = new StringBuffer();

for(int i = 0 ; i < temp.length(); i++) {
if((int)temp.charAt(i) == 10) {
buffer.append("<br />");
} else {
buffer.append(temp.charAt(i));
}
}

The result is A B D will be printed in one line.
I also put escape=”false” to my Element.

Is there a way to use a textarea and let the frame disappear? I guess only with css.

Greetings,
Hauke

Reply

Hauke January 26, 2012 at 9:11 pm

Sorry, I appended

& lt;br /& gt;

without the spaces and the result was

A B D

Reply

Hauke January 26, 2012 at 9:12 pm

Sorry I can’t edit my post, so between B and D was the br-tag :-)

Reply

Hauke January 28, 2012 at 5:51 pm

Okay, I did is like this:

I put a textarea like this

readonly=”true” style=”background-image: none;border:none;resize: none;”

Reply

Michael Scepaniak January 28, 2012 at 9:05 pm

Hauke,

Thanks for the question. Textareas are different. Using normal newline/line-break characters works for me:
ArnBrnC

I hope this helps.

Mike….

Reply

Hassan July 5, 2012 at 7:13 pm

Just use

and it works great.

Reply

Michael Scepaniak July 6, 2012 at 6:50 am

What Hassan wrote, without the spacing:
Just use < code >< /code > and it works great.

Thanks for the input, Hassan.

Mike…

Reply

Kamal February 4, 2013 at 9:56 am

Thank you

Reply

suman February 14, 2013 at 2:23 am

thanks alot.. it works for me

Reply

Michael Scepaniak February 26, 2013 at 5:08 pm

Welcome, Suman.

Mike…

Reply

suman February 14, 2013 at 2:35 am

i have a question for u michael.

i have a following code:

h:selectOneListbox
f:selectItem itemLabel=”page1″
f:selectItem itemLabel=”page2″
/h:selectOneListbox

here after selecting page1, it has to re-direct to page1.xhtml and after selecting page2 it has to re-direct to page2.xhtml.

i’m using spring webflow.

i dont want to use any java script code or java code.

Its pure jsf. How to do it??

reply soon

Reply

Michael Scepaniak February 26, 2013 at 5:10 pm

Off the top of my head, I’m not sure. Feel free to post the answer if/when you find it. Good luck.

Mike…

Reply

Syed March 26, 2013 at 12:53 am

Hi Michael,

I have a question,.
i have the following Code in my Application

the problem am facing in, i am not able to Avoid line break. So, when i select the input text box the output text value breaks input 2 lines. Is there a way i can avoid line break?

Thanks.

Reply

Syed March 26, 2013 at 12:55 am

Hi ,
Sorry forgot to paste the Code.
“h:outputText value=”Application ID ” /”

Thanks

Reply

Michael Scepaniak March 26, 2013 at 6:37 am

Syed,

I’m not really getting why your content is wrapping, but if there is an actual line-break or newline character in your text, try filtering it out of the text on the server side before displaying it. Good luck.

Mike…

Reply

Ouro June 2, 2013 at 8:27 am

Hey
Thank you, it was very straightforward and it worked.
Nice web btw, thank you again.

Reply

Michael Scepaniak June 3, 2013 at 5:03 pm

You’re welcome, Ouro. Thanks for the feedback.

Mike…

Reply

Fanny June 28, 2013 at 8:04 pm

Hi ,
Unfortunately I’m not good English but I need urgent help please!
I have a problem:
how can I pass the contents of my textarea with line upheaval back.
Example, I have implemented a form with jsf and when I write in the textarea:
hello people
The weather is nice today.

I get: hello people, the weather is nice today.

index.xhtml

ouput.xhtml

Thks for the help .

Reply

Michael Scepaniak July 1, 2013 at 8:46 pm

Fanny,

It looks like the line break is getting lost. Off the top of my head, I don’t remember if that’s been my experience or not. Sorry. If you aren’t able to retain it with a textarea binding, maybe try passing it up using JavaScript and a manual backing bean value mapping (e.g., a4j:jsFunction and an a4j:actionparam). Good luck.

Mike…

Reply

Shantanu November 6, 2013 at 2:11 pm

This doesn’t work with JSF 2.0 . I’ve tried this repeatedly. Either it’s browser problem of the JSF version.

Reply

Michael Scepaniak December 19, 2013 at 7:59 pm

Shantanu,

Keep in mind that I wrote this in 2010 and was referring only to version 1.x. I’ve never tried it with JSF v2.0.

Mike….

Reply

Dorje June 26, 2014 at 10:00 am

Tnks, a simple ideia that help me. =)

Reply

Leave a Comment

Previous post:

Next post:

Member of The Internet Defense League