h:outputText does not break \\r\\n characters into new lines

Question

I've some text in a String variable which contains carriage returns and new lines \r\n.

text = "Text1\r\nText2\r\nText3";

I'm presenting it using a <h:outputtext>.

<h:outputText value="#{bean.text}" />

But it doesn't recognize the new line characters and shows as below in webbrowser.

Text1 Text2 Text3

Why does the <h:outputText> not break \n into new lines?

What should I do? Do I have to replace \n with <br />?

Answer 1

Linebreaks in HTML are represented by <br /> element, not by the \n character. Even more, open the average HTML source code by rightclick, View Source in browser and you'll "see" \n over all place. They are however not presented as such in the final HTML presentation. Only the <br /> will.

So, yes, you need to replace them by <br />.

<h:outputText value="#{fn:replace(bean.text,'\n','&lt;br/&gt;')}" escape="false" />

Note: when using Apache EL instead of Oracle EL, double-escape the backslash as in \\n.

<h:outputText value="#{fn:replace(bean.text,'\\n','&lt;br/&gt;')}" escape="false" />

Otherwise you will face an exception with the message Failed to parse the expression with root cause org.apache.el.parser.ParseException: Encountered <ILLEGAL_CHARACTER>.

This all is however ugly and the escape="false" makes it sensitive to XSS attacks if the value comes from enduser input and you don't sanitize it beforehand. A better alternative is to keep using \n and set CSS white-space property to preformatted on the parent element. If you'd like to wrap lines inside the context of a block element, then set pre-wrap. Or if you'd like to collapse spaces and tabs as well, then set pre-line.

E.g.

<h:outputText value="#{bean.text}" styleClass="preformatted" />

.preformatted {
    white-space: pre-wrap;
}

Answer 2

This is normal behaviour, in HTML consecutive whitespace such as spaces and linebreaks gets normalized so it displays just as a single space. You would get the same display if you included the text with linebreaks directly in the HTML source. To honor linebreaks in the the output you would have to wrap the text in pre tags or apply a stylesheet class:

<pre><h:outputText value="..."/></pre>

<div style="white-space: pre-wrap"><h:outputText value="..."/></div>

For other possible values for the white-space attribute look at this page: http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 3

The previous answers caused problems for me for large amounts of text, like extremely wide output (no text wrap), which style="white-space: pre-wrap" did not fix; or it just displayed the <br/> as text, not as a line ending.

In the end I used the h:inputTextarea component to display the text and made it 'read only' which worked straight off without replacing the line breaks, nor having to use the extra styles or styleClasses. And, it is resizeable to suit the user's needs, which is a bonus.

<h:inputTextarea cols="70" rows="10" readonly="true" value="#{bean.text}" /> 

For small amounts of text, I found the pre-wrap option, as suggested by henko above, to work well.