h:outputText does not break \r\n characters into new lines
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 />
. You can use JSTL functions for this:
<... xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions">
<h:outputText value="#{fn:replace(bean.text,'\n','<br/>')}" 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','<br/>')}" 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;
}
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
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.