ExtJS 4 - Wrapping the column headers in grid panel

Question

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:

Answer 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%;
}