jqGrid控制列中文字超出省略

希望得到效果如上图，超出20个文字后省略，并且缩放屏幕可以换行省略展示

                        {label :'备注',
                            name : 'distributionremarks',
                            index : 'distributionremarks',
                            width : 260,
                            sortable : true,
                            formatter : function(cellvalue,options,rowObject){
                                if (cellvalue!=null){
                                    //显示 转义
                                    cellvalue=cellvalue.replace(/({|})/g,'');   //过滤{}
                                    cellvalue=cellvalue.replace(/</g,'&lt;');    //置换符号<
                                    cellvalue=cellvalue.replace(/>/g,'&gt;');    //置换符号>
                                    //  t=t.replace(/<\/?[^>]*>/g,''); //*<\/?[^>]*>可以匹配<script></style></body>等，并置空。而不是替换<和>两个符号
                                    return role_strLimite(cellvalue);
                                }else {
                                    return ""
                                }

                            },
                        }

    function role_strLimite(cellvalue) {
        if (cellvalue != null && cellvalue.length > 20) {
            var value = cellvalue.toString().replace("\"", " ").replace("\'", " ");
            return "<div title ='" +showAllInfo(value) + "'>" + value.substring(0, 20) + ".....</div>";
        }
        if (cellvalue == null) {
            return "";
        }
        return cellvalue;
    }

    /**
     * 强制截取字符串换行，解决火狐浏览器悬浮窗不换行的问题
     * @param value
     * @returns {string}
     */
    showAllInfo = function (value) {
        var valueStr = "";
        var len = value.length;
        var count = Math.ceil(len / 50);
        for (var i = 0; i < count; i++) {
            if (i == count - 1) {
                valueStr = valueStr + value.substring(i * 50);
            } else {
                valueStr = valueStr + value.substring(i * 50, (i + 1) * 50) + "\n";
            }
        }

        return valueStr;
    }

<style>

    .ui-jqgrid tr.jqgrow td
    {
        /* jqGrid cell content wrap  */
        white-space: normal !important;
        height :auto;
    }

    th.ui-th-column div
    {
        /* jqGrid columns name wrap  */
        white-space:normal !important;
        height:auto !important;
        padding:0px;
    }
</style>