如何包装主要面孔树表的标题？

Question

我正在使用素面 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;
}

Answer 2

        For wrapping headers in data table, I also used column group like following`
<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>
        <p:columnGroup type="header">
                          <p:row>
                            <p:column headerText="${messages.colPhyLineName}" style="text-align:left; white-space:normal; word-wrap:break-word;" sortBy="#{item.phyLineName}" sortFunction="#{stringHandling.numericSortOfString}"/>                    
                          </p:row>
        </p:columnGroup>
       <p:column 
                style="text-align: left; " styleClass="wrap"  >
                <h:outputText value="#{item.phyLineName}" />
       </p:column>

    For treetable, I have to override default treetable css

    <style type="text/css">

    <!-- This css has been overriden so that headers of tree tables wrap properly if screen size is small.
     This is done locally as original behaviour may be required for some usecase
     -->

    .ui-treetable thead th {
        white-space: normal;
        word-wrap: break-word;
    }

    </style>

Answer 3

试试这个：

<ui:define name="head">
    <style type="text/css">
       .ui-state-default 
        {
          white-space: normal !important;
          word-wrap: break-word !important;
        }
    </style>

删除 treeTable 的 styleClass。 希望对您有所帮助。