首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >h:outputText不会将\r\n字符换行

h:outputText不会将\r\n字符换行
EN

Stack Overflow用户
提问于 2013-02-01 21:23:53
回答 3查看 81.4K关注 0票数 51

我有一个包含回车符和新行\r\nString变量。

代码语言:javascript
运行
复制
text = "Text1\r\nText2\r\nText3";

我正在使用<h:outputtext>来呈现它。

代码语言:javascript
运行
复制
<h:outputText value="#{bean.text}" />

但它无法识别换行符,并在new浏览器中显示如下所示。

Text1 Text2 Text3

为什么<h:outputText>不将\n拆分成新的行呢?

我该怎么办?我必须用<br />替换\n

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-02-01 21:51:20

在超文本标记语言中,换行符由<br />元素表示,而不是由\n字符表示。更重要的是,用鼠标右键打开普通的超文本标记语言源代码,在浏览器中查看源代码,你会“看到”所有地方的\n。然而,在最终的HTML演示文稿中,它们并不是这样呈现的。只有<br />才会。

因此,是的,您需要将它们替换为<br />。您可以使用JSTL functions来执行以下操作:

代码语言:javascript
运行
复制
<... xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions">

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

注意:当使用Apache而不是Oracle时,要像在\\n中那样对反斜杠进行双转义。

代码语言:javascript
运行
复制
<h:outputText value="#{fn:replace(bean.text,'\\n','&lt;br/&gt;')}" escape="false" />

否则,您将面临一个异常,并显示消息Failed to parse the expression with root cause org.apache.el.parser.ParseException: Encountered <ILLEGAL_CHARACTER>

然而,这一切都很丑陋,如果值来自最终用户输入,而您事先没有对其进行sanitize,则escape="false"会使其对XSS attacks敏感。一个更好的选择是继续使用\n,并在父元素上将CSS white-space property设置为预格式化。如果您希望在块元素的上下文中换行,则设置pre-wrap。或者,如果您还想折叠空格和制表符,那么设置pre-line

例如。

代码语言:javascript
运行
复制
<h:outputText value="#{bean.text}" styleClass="preformatted" />
代码语言:javascript
运行
复制
.preformatted {
    white-space: pre-wrap;
}
票数 115
EN

Stack Overflow用户

发布于 2013-02-01 21:52:12

这是正常的行为,在HTML中,连续的空格如空格和换行符被标准化,因此它只显示为一个空格。如果在HTML源代码中直接包含带换行符的文本,则会得到相同的显示效果。要在输出中使用换行符,您必须在pre标记中对文本进行换行,或者应用样式表类:

代码语言:javascript
运行
复制
<pre><h:outputText value="..."/></pre>

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

有关white-space属性的其他可能值,请查看此页面:http://www.w3schools.com/cssref/pr_text_white-space.asp

票数 12
EN

Stack Overflow用户

发布于 2014-10-23 07:06:14

前面的答案给我带来了大量文本的问题,比如非常宽的输出(没有文本换行),这是style="white-space: pre-wrap"没有解决的;或者它只是将&lt;br/&gt;显示为文本,而不是行尾。

最后,我使用h:inputTextarea组件来显示文本,并将其设为“只读”,它无需替换换行符即可直接工作,也不必使用额外的样式或styleClasses。而且,它的大小可以根据用户的需要进行调整,这是一个额外的好处。

代码语言:javascript
运行
复制
<h:inputTextarea cols="70" rows="10" readonly="true" value="#{bean.text}" /> 

对于少量的文本,我发现pre-wrap选项工作得很好,就像上面henko建议的那样。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14647274

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档