how to wordwrap in column header

[x490812]

I have an extededDataTable and I am not able to get the column headers to word wrap or continue on the next line. How do you do that?

Here is some code

<rich:extendedDataTable value="#{taxSummaryList.resultList}"
 var="tax" id="taxSumTbl" width="100%" height="400px"
 >
 <rich:column width="25"
 sortBy="#{tax.id}"
 >
 <f:facet name="header">
 <h:outputText value="Id" style="font-size:xx-small;" />
 </f:facet>
 <s:link view="/tax_summary_item.xhtml" value="#{tax.id}">
 <f:param name="tsID" value="#{tax.id}" />
 </s:link>
 </rich:column>
 <rich:column
 sortBy="#{tax.processMonth}"
 filterEvent="onkeyup">
 <f:facet name="header" >
 <h:outputText value="Process Month" style="font-size:xx-small;" />
 </f:facet>
 <h:outputText value="#{tax.processMonth}" style="font-size:xx-small;" />
 </rich:column>
 <rich:column
 sortBy="#{tax.percentOfUpb}"
 filterEvent="onkeyup">
 <f:facet name="header">
<!-- I WISH TO SPLIT THIS TO 2 ROWS -->
 <h:outputText value="Percent of UPB" style="font-size:xx-small;" />
 </f:facet>
 <h:outputText value="#{tax.percentOfUpb}" style="font-size:xx-small;" />
 </rich:column>
.
.
.

[nbelaevski]

Hello,

Try to add this:

.extdt-sortable-header {
 white-space: normal;
}

Not completely sure whether it will affect all sorts of headers that extended data table can show (please check by user guide!).