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

Posted 2023-02-19

【中文标题】如何在适用于 IE7、IE8 和 FF 的 jqGrid 上实现自动换行

【英文标题】：How to implement wordwrap on jqGrid which works on IE7, IE8 and FF

【发布时间】：2011-02-28 23:25:57

【问题描述】：

，同时还可以调整列大小（网格正确对齐）。

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

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

【参考方案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',