css - JSF 富 :datatable column display very long text in multiple lines

Question

我在 jsf .xhtml 页面中有一个 richdatatable。我有一个特定单元格的很长的文本。我如何设置列的宽度并在指定的单元格中显示文本。我是 JSF 和 CSS 的新手。我正在提供一个例子。假设我在 richdatatable 中有两列，其中一列的文本很长。我希望很长的文本显示在行中(换行文本)而不是一行。我不确定在何处、如何以及将什么作为 CSS 的一部分

<ui:composition template="/template.xhtml">
    <ui:define name="title">
        <h:outputText value="#{bundle.ViewFileTitle}"></h:outputText>
    </ui:define>
    <ui:define name="body">
    <h:form>
            <rich:dataTable value="#{fileController.feedbackFileItems}" var="item" id="table">
                    <rich:column>
                       <f:facet name="header">
                            <h:outputText value="#{bundle.ListFeedbackTitle_feedbackPK_feedbackId}"/>
                        </f:facet>
                        <h:outputText value="#{item.feedbackPK.feedbackId}"/>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#{bundle.ListFeedbackTitle_department}"/>
                        </f:facet>
                        <h:outputText value="#{item.department}"/>
                    </rich:column>
            </rich:dataTable>
            </h:form>
    </ui:define>
</ui:composition>

Answer 1

要在多行中显示长文本，您可以使用 rich:column 的 width 属性:

<rich:column width="150" ...>

或 h:column 相同:

<h:column width="110">

---

如果您不想显示多行数据表单元格的文本，那么
1) 您可以使用 rich:dataTable 的 columnClasses 属性并为该列指定不换行样式。例如组合

<rich:dataTable columnClasses="nowrap,">

使用 CSS

.nowrap {
    white-space: nowrap;
}

将生成第一列未换行的表格。

2) 您可以使用 rich:column 的 style 或 styleClass 属性来获得相同的结果(具有相同的 CSS)。