如何为jqxGrid列标题设置word-break:break-all样式？

我有一个基于jqxGrid的ProductPriceList网格，代码如下：

var CreatedTABLETGrid = function (catid) {

var columns =
    [
        { text: 'Integrator/Online/Business Partner', datafield: 'StockRange', columntype: 'textbox', filtercondition: 'contains', width: '3%', cellclassname: 'stockcolumns' }
    ];

var gridData = generatedata();
var source =
{
    totalrecords: gridData.length,
    localData: gridData,
    datafields:
        [
            { name: 'StockRange', type: 'string' },
        ],
    datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);    
$("#ProductPriceList").jqxGrid(
    {
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        columnsresize: true,
        groupable: true,
        sortable: true,
        showfilterrow: true,
        filterable: true,
        autoshowfiltericon: true,
        selectionmode: 'multiplecellsextended',
        columns:columns
    });
}

我想给列标题Integrator/Online/Business Partner应用word-break换行样式，尝试了以下CSS但没效果：

#columntableProductPriceList {
    word-wrap: break-word !important;
    /* IE 5.5+ and CSS3 */
    white-space: normal !important;
    /*height: auto !important;*/
    vertical-align: text-top !important;
    padding-top: 2px !important;
    padding-bottom: 3px !important;
}

如果打开注释里的height: auto !important;，标题文本直接消失，求解决办法。

jqxGrid的列标题有自带的结构和样式限制，直接用自定义ID选择器无法命中正确元素，换以下CSS就能解决：

/* 解锁列标题容器的固定高度限制，允许自适应 */
#ProductPriceList .jqx-grid-column-header {
    height: auto !important;
    white-space: normal !important;
}

/* 给标题文本设置换行规则，调整内边距和行高优化显示 */
#ProductPriceList .jqx-grid-column-header-text {
    word-break: break-word;
    white-space: normal;
    padding: 4px 6px;
    line-height: 1.2;
}

另外注意：你给列设置的宽度是3%，这个宽度过窄，即使换行也可能显示不全，建议改成固定宽度（比如150px）或更大的百分比，保证文本有足够空间展示。

内容的提问来源于stack exchange，提问作者wittream