How to limit width of column in p:dataTable, w/o line break, keeping single line?

Question

I have been having hard time with Primefaces and SO is my ultimate place to find answer for issues.

I have p:dataTable with many columns so each of them should have short width. For headers, they seem OK but for data columns they break to 2 or more lines which I don't prefer.

I made first column's width larger to show what are in data table. Header text is fine, keeping it to single line. But data columns are bad for me. I prefer they keep it to single line. I want no line break. Ellipses is preferable but not mandatory.

<p:dataTable id="searchResultTable" var="searchData" value="#{registerBean.searchDataList}"
        scrollHeight="200"
        rowIndexVar="rowIndex"
        rowKey="#{searchData.model}"
        selectionMode="single"
        selection="#{registerBean.selectedSearchData}"
        paginator="true" rows="10"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="5,10,20" resizableColumns="true">
        <p:ajax event="rowSelect" listener="#{registerBean.onSelectedSearchData}"/>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(0)}"
              width="30" style="height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,0)}" />
    </p:column>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(1)}"
              width="30" style="10px; height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,1)}" />
    </p:column>
    <p:column headerText="#{registerBean.getSearchResultHeaderText(2)}"
              width="30" style="10px; height: 10px; font-size: 8pt;">
        <h:outputText value="#{registerBean.getSearchResultText(rowIndex,2)}" />
    </p:column>

I used h:outputText for each columns. I don't persist to h:outputText, any component I can use with Primefaces can be fine.

Thanks in advance.

Answer 1

I could find a solution. Adding CSS shown below to <p:column/> worked for me. Ellipsis is not working but no line-feeding, no expanding line height.

<style type="text/css">
.singleLine
{
    text-wrap:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>

And do like this:

<p:column headerText="Something"
    width="100" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
    <h:outputText value="#{something.value}" />
</p:column>

I hope it will help few people on this globe.