如何在适用于IE7、IE8和FF的jqGrid上实现单词换行？

Question

如何在 jqGrid 上实现 wordwrap，使其适用于 IE7、IE8 和 FF，同时使列调整大小正常工作（网格会正确对齐）。

尝试将每个 td 中的内容用特定宽度的 div 进行包裹（基于初始 TH 宽度），但是 colresize 无法在插入的 div 上工作。不过 jqGrid 可以计算调整大小的 TH 和相邻 TH 的宽度。

是否有更好的解决方案可以避免所有的 JavaScript“hack”？

- bcm

Answer 1

jqGrid文本/单词换行通过以下CSS解释了如何实现：

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

- Justin Ethier

---

+1：非常好的和清晰的解决方案。我建议在ColModel中为所有列仅使用title:false来关闭不再需要的工具提示。这样可以节省一些内存。此外，对于表格中的所有单元格使用其他vertical-align，如text-top，可能也很有趣。 - Oleg

最终移除了vertical-align:text-top，因为它导致在具有溢出隐藏内容的列中锚点的下划线样式在IE中溢出。（只有下划线溢出！） - bcm

Answer 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
    }

- Yasser Shaikh

Answer 3

大家好，

以下是示例：

 $("#jqxgrid").jqxGrid(

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

- user3729495