如何在适用于 IE7、IE8 和 FF 的 jqGrid 上实现自动换行答案

【问题标题】：How to implement wordwrap on jqGrid which works on IE7, IE8 and FF如何在适用于 IE7、IE8 和 FF 的 jqGrid 上实现自动换行
【发布时间】：2011-02-28 23:25:57
【问题描述】：

如何在适用于 IE7、IE8 和 FF 的 jqGrid 上实现自动换行，同时还可以调整列大小（网格正确对齐）。

尝试使用特定宽度的 div（基于初始 TH 宽度）对每个 td 上的内容进行内包装，但 colresize 不适用于我插入的 div。 jqGrid 会计算调整后的 TH 和相邻 TH 的宽度。

有没有更好的解决方案可以避免所有 JavaScript 'hacks'？

【问题讨论】：

标签： css jqgrid resize word-wrap

【解决方案1】：

jqGrid Text/Word Wrapping 解释了如何做到这一点，使用以下 CSS：

.ui-jqgrid tr.jqgrow td {
 white-space: normal !important;
 height:auto;
 vertical-align:text-top;
 padding-top:2px;
}

【讨论】：

+1：非常好的和清晰的解决方案。我建议只在ColModel 中为所有列使用title:false 来关闭不再需要的工具提示。一个会节省一点内存。此外，将其他vertical-align 用作表中所有单元格的text-top 可能也很有趣。
最终移除了 vertical-align:text-top，因为它导致在 IE 中溢出隐藏内容的列中的锚的下划线样式溢出。（只有下划线溢出！）

【解决方案2】：

使用这个 css，肯定会有帮助。

   .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: normal !important; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }

【讨论】：

【解决方案3】：

全部成交，

这可以如下：

 $("#jqxgrid").jqxGrid(

            {
                source: dataAdapter,
                width: 1500,
                autorowheight: true,
                autoheight: true,
                columnsresize: true,
                theme: 'ui-redmond',

【讨论】：