如何将单列标题文本换行到jqgrid中的多行

Question

如果列标签文本宽于列宽，标签文本将被截断。 增加列宽并不好，因为有些文本很长。 如何使文字换行成多行？标题高度应由最大列高确定。

我找到的唯一解决方案是

jQgrid: multiple column row headers

但这并没有实现文字的自动换行。

如何实现标题文本的自动换行？

更新。我尝试了Oleg样式的字符和自动换行。

角色包装

    th.ui-th-column div{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* 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

}

仅显示第二行的一半。第三行根本没有显示：

自动换行

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

禁用包装列的列大小调整。在那些列上移动鼠标图标到列分隔符鼠标光标不会更改为sizer。包裹的列无法调整大小。

如何解决这些问题？

更新2

我尝试了字符换行（Oleg回复中的最后一个样本）。 如果列宽减小，我发现问题，以便标题中出现更多行：

1. 如果在列分隔符底部拖动，则无法调整列的大小：调整大小时不会增加缩放器高度。

2. 在IE9标题中，高度增加是不够的：调整大小后，最后一个标题行不可见。在fireFox中，这个问题不会发生。

Answer 1

在包含字符换行的示例中，您忘记在!important设置后使用height: auto。

我同意列调整器的问题确实存在于我的old answer演示中。所以我改进了它。此外，我尝试描述在哪些情况下使用字符包装而不是自动换行很重要。

带有自动换行的新演示版为here。代码如下：

var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;

grid.jqGrid({
    ...
});

// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
    .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
    'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
    this.style.cssText = resizeSpanHeight;
});

// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
    var ts = $(this);
    ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});

使用以下CSS

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

并生成以下图片

（我在第一列中的每个字符后面加<br/>，使文本“Inv No”放在很多行上。）

一切看起来都很好，但在某些情况下，您可以在列标题中一个非常长的单词。有些像德语这样的语言有时构建像“Softwareberetstellungsform”这样的长词，它们来自许多单词。在示例中，它是“软件”，“bereitstellung”和“形式”。在其他语言中，同样的情况也是可能的，但不是那么频繁。因此，您将收到以下（不完美）图片（请参阅演示here）：

您可以看到文本“AmountInEUR”，“TaxInEUR”和“TotalInEUR”被切断。可以在列文本中包含手动线制动器（<br/>），也可以使用我在the answer中描述的字符包装。如果我们只将th.ui-th-column div的上述CSS更改为以下

th.ui-th-column div {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}

我们会收到以下结果（请参阅演示here）

顺便说一下，如果文本包含空格，角色包装在Google Chrome等浏览器中的工作方式为自动换行（!!!）。因此，the demo将显示在谷歌浏览器，Safari，Opera，Firefox中，如上图中的自动换行，但IE中的相同演示（包括IE9）将被视为

所以绝对不是绝对完美的，但字符包装对于所有现代Web浏览器都有一些优势，除了Internet Explorer（版本<10）。在列文本中使用<br/>或使用依赖于当前使用的Web浏览器的CSS可以使解决方案更好。

Answer 2

<style type="text/css">
    .ui-jqgrid .ui-jqgrid-htable th div
    {
        height: auto;
        overflow: hidden;
        padding-right: 4px;
        padding-top: 2px;
        position: relative;
        vertical-align: text-top;
        white-space: normal !important;
    }
</style>

Answer 3

Following code wraps row data

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

Following code wraps table header data    
    .ui-jqgrid .ui-jqgrid-htable th div
        {
          word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
        }