ExtJS 4 - Wrapping the column headers in grid panel

问题

I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.

Is there any way these texts can be wrapped and limited to the column width?

Here is an image of the issue:

回答1:

Give this a shot in your CSS:

.x-grid3-hd-inner {
     overflow: hidden;
     padding: 3px 3px 3px 5px;
     white-space: normal;
}

And additionally, another option if the first doesn't work:

.x-column-header-inner .x-column-header-text {
    white-space: normal;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}

来源：https://stackoverflow.com/questions/7361512/extjs-4-wrapping-the-column-headers-in-grid-panel