ExtJs 4 - How to wrap a column header text to fit in the column width?

[netemp]

I have a grid which has long phrases as header text.

The problem is that this text is never displayed properly as per the length of the column.

The question is - "Is there any way to wrap the header text as per the width available for the column?"

Attached is a screenshot of the issue.

Thanks in advance.

[netemp]

A fellow-developer has shared this solution:

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

Including this hack makes things work fine in Mozilla but there is no effect in IE9.

Any clue?

Thanks in advance.

[nikadod]

Any reliable solution on this issue?

[Joyfulbob]

We use this:

{
      header: 'Price<br>2nd row<br>3rd row', ...
} 

[qooleot]

In case anyone else comes across this:

.x-column-header-inner, .x-column-header-inner span { white-space:normal !important; }

[abhijit]

.x-column-header-text {
  display : block;
  overflow : hidden;
  text-overflow : ellipsis;
}