如何在JSF DataTable中显示inputTextArea输入的换行符？

在RichFaces 3.3 + Seam的环境下，你遇到的inputTextArea换行正常但DataTable里不显示换行的问题，我给你整理了几个可靠的解决方案：

方案1：将换行符转换为HTML换行标签（推荐） #

HTML默认会忽略文本中的\n换行符，所以我们需要把这些换行符替换成<br/>标签，同时让JSF不转义这些HTML标签才能生效。

首先确保页面已经导入JSTL函数标签库（如果还没加的话）：

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

然后修改DataTable中的<h:outputText>代码：

<rich:column>
    <f:facet name="header">TextShouldHaveLineBreaks</f:facet>
    <h:outputText value="#{fn:replace(f.text, '\n', '<br/>')}" escape="false"/>
</rich:column>

注意事项： #

• escape="false"是核心设置，它会阻止JSF把<br/>转义成<br/>，这样浏览器才能识别为换行。
• 如果文本来自用户输入，要注意XSS安全风险。可以结合Seam的HTML编码工具先处理文本，只保留换行转换：

  <h:outputText value="#{fn:replace(org.jboss.seam.text.HtmlEncoder.encode(f.text), '\n', '<br/>')}" escape="false"/>
  

  这样既保留了换行，又能把用户输入的其他HTML标签转义，避免XSS攻击。

方案2：强制CSS样式生效 #

你之前尝试的white-space: pre-wrap没效果，大概率是RichFaces的默认样式优先级更高，覆盖了你的设置。可以通过增强样式优先级来解决：

先在页面中添加自定义CSS：

<style type="text/css">
    .data-table-line-break {
        white-space: pre-wrap !important;
        word-wrap: break-word;
        /* 可选：匹配其他列的字体、内边距等样式 */
        font-family: inherit;
        padding: 2px 4px;
    }
</style>

然后把样式应用到<h:outputText>上：

<rich:column>
    <f:facet name="header">TextShouldHaveLineBreaks</f:facet>
    <h:outputText value="#{f.text}" styleClass="data-table-line-break"/>
</rich:column>

!important会强制你的样式优先级高于RichFaces的默认样式，这样文本中的换行符就能被正确识别了。

方案3：优化只读textarea的样式 #

如果你还是想用只读textarea作为替代方案，只需要调整CSS让它和普通文本样式一致：

<rich:column>
    <f:facet name="header">TextShouldHaveLineBreaks</f:facet>
    <h:inputTextarea value="#{f.text}" readonly="true" 
        style="border: none; background: transparent; white-space: pre-wrap; 
               width: 100%; resize: none; font-family: inherit; padding: 2px 4px;"/>
</rich:column>

通过去掉边框、背景，继承字体和内边距，就能让它和其他列的样式无缝匹配，同时保留换行显示的功能。

内容的提问来源于stack exchange，提问作者Robert