ExtJS 4 - 在网格面板中包装列标题答案

【问题标题】：ExtJS 4 - Wrapping the column headers in grid panelExtJS 4 - 在网格面板中包装列标题
【发布时间】：2011-09-09 12:19:00
【问题描述】：

我有一个网格，其中包含长短语作为标题文本。这些文本永远不会以列的可用宽度正确显示。

有什么办法可以将这些文本换行并限制在列宽范围内？

这是问题的图片：

【问题讨论】：

标签： extjs header grid extjs4

【解决方案1】：

在你的 CSS 中试一试：

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

另外，如果第一个不起作用，还有另一个选项：

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

【讨论】：

嗨 dmackerman 感谢分享 hack。不幸的是，第一个解决方案不起作用，但第二个解决方案在 Mozilla 中运行良好。但是在 IE（我检查过的 IE9）中它不能有任何效果。有什么建议么。再次感谢。
如果单击标题进行排序，则删除顶部：20%，由于某种原因，它会在之后将标题文本向下推。