html - 如何包装 primefaces 树表的标题？

Question

我正在使用 prime faces 5.3。我正在使我的页面响应。我正在使用 class="ui-fluid"。尽管列已正确包装，但我无法包装树表的标题。以下技术适用于数据表。但它不适用于树表。我的xhtml页面如下

    <?xml version="1.0" encoding="UTF-8" ?>
<ui:define name="head">
        <style type="text/css">
        /** This css will be used for wrapping multi word(both space and non space) into next line **/
            wrap {
                white-space: normal;
                word-wrap: break-word;
             }


        </style>
    </ui:define>

<div class="ui-fluid">
    <p:tabView id="tabviewid" value="#{mplsXcListController.listOfTabs}" var="eachTabTitle" 
        activeIndex="#{mplsXcListController.activeTab}" scrollable="true">   
        <p:ajax event="tabChange" listener="#{mplsXcListController.tabChangeCallBack}"/>
        <p:tab id="tab_#{eachTabTitle}" title="${eachTabTitle}">
        <h:form name="tabForm">

    <p:panelGrid id="filter" columns="10" layout="grid" style="width:100%" styleClass="ui-fluid">

        ..........

    </p:panelGrid>
    <!-- <br></br> -->
    <h:panelGrid border= "0" id="entryPage" columns="8" layout="grid" style="width: 100%;" columnClasses="ui-grid-col-1,ui-grid-col-2, ui-grid-col-1 alignmentRight,ui-grid-col-1,ui-grid-col-1,ui-grid-col-2,ui-grid-col-1,ui-grid-col-2" styleClass="ui-fluid">
        <p:commandButton id="prevFilter" value="${messages.lbPrevEntry}" 
            title="${messages.mPrevEntry}" ajax="false" 
            disabled="${mplsXcListController.isPrevFilterDisabled()}"
            action="${mplsXcListController.prevMplsXcEntryList()}"
            update="filterlineName filterNEName tmFilter tabviewid filterCount filterPage"/>

        ...........
    </h:panelGrid>

            <p:treeTable id="mplsxctt" emptyMessage="${messages.noRecordFound}" var="item" value="${mplsXcListController.constituteTabFilteredDataList(eachTabTitle)}"
                 resizableColumns="true" liveResize="false" selectionMode="checkbox" selection="#{mplsXcListController.getTabData(eachTabTitle).selectedNodes}" sortMode="multiple" styleClass="wrap">

                <p:ajax event="select" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeSelect}"/>
                <p:ajax event="unselect" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeUnselect}"/>

                <p:column headerText="${messages.colLineName}" style="text-align:left;" styleClass="wrap"
                    sortBy="#{item.lineName}" >
                    <h:outputText rendered="${item.lineMainNode=='branchNode'}" value="#{item.lineName}" />
                    <h:outputText rendered="${item.lineMainNode=='mainNode'}" style="font-weight: bold;text-align: left;" value="#{item.lineName}" />
                </p:column>

                <p:column headerText="${messages.colServCapacity}" style="text-align:left;" styleClass="wrap" priority="3">
                    <h:outputText value="#{item.serviceCapacityDisplay}" />
                </p:column>
                .......................

            </p:treeTable>
            </h:form>
        </p:tab>        
    </p:tabView>


</div>
</ui:define>
</ui:composition>

Answer 1

你必须覆盖 css white-space 属性，使用这个:

.wrap {
    white-space: normal!important;
    word-wrap: break-word;
}