如何在数据表的一列中显示 2 行？

Posted 2023-02-22

【中文标题】如何在数据表的一列中显示 2 行？

【英文标题】：How to show 2 line in one column in datatable?

【发布时间】：2013-01-31 10:34:55

【问题描述】：

我的应用程序中有一个数据表。一列有大量数据，增加了表格的宽度。

我想将该列中的数据拆分为两行或多行。

我尝试为该列设置宽度，但数据没有拆分，也没有显示总数据。

<p:column headerText="#msgs['exception.label.exceptionMsg']" >
         <h:outputText value="#exception.exceptionMsg"/>
</p:column>

如何拆分数据？

【问题讨论】：

尝试<h:panelGroup:> 组件并指定rules=rows 以显示每行之间的线条

“split” 不是正确的关键字，您不想拥有多个文本组件，您需要“换行”。

【参考方案1】：

.ui-datatable tbody td 的默认样式为white-space: nowrap，这意味着长文本不会换行。您想通过将其设置回 white-space: normal 来覆盖此样式。

例如

<p:column  styleClass="wrap">

使用这个 CSS

.ui-datatable tbody td.wrap 
    white-space: normal;

另见：

How do I override default PrimeFaces CSS with custom styles?

【讨论】：

+1 用于简单的 CSS 解决方案。有时，需要调整的不是 JSF 或 Java，而是 CSS 魔法。

感谢 BalusC 的回答，但是当数据中有空格时，行会中断。具有连续线的线不会中断。请告诉我如何打破连续线。

我试过这样

【参考方案2】：

这是我的解决方案。很简单。

<p:column style="white-space : normal ; width: 315px">
    <h:outputText value="T h i s   i s  a  v e r y  L a r g e   T e x t">
    </h:outputText>      
</p:column>

【参考方案3】：

在阅读了 BalusC 对其他一些相关问题的回答后，我使用了以下解决方案。

我在 CSS 中使用它：

.ui-datatable tbody td.wrap 
    white-space: normal;
    word-wrap: break-word;

还有我的专栏：

<p:column style="text-align: left"  styleClass="wrap">

这会处理带空格和不带空格的数据-两者。