如何在jqgrid中将单列标题文本换行为多行

Question

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

我找到的唯一解决方案是 jQgrid：多列行标题 但这并没有实现文本的换行。

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

更新。我尝试了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;
   }

禁用换行列的调整大小功能。在这些列上，将鼠标移动到列分隔符时，鼠标指针不会变为调整大小器。无法调整大小的换行列。

如何解决这些问题？

更新2

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

1. 如果在列分隔符底部拖动，则无法调整列大小：调整大小器高度未增加。 2. 在IE9中，标题高度增加不足：调整大小后，最后一个标题行不可见。在火狐浏览器中，不会出现此问题。

- Andrus

---

请查看答案。因此，在列标题中，与单元格相同的换行方式起作用。此外，可以实现字符换行，请参见此处。如果需要，可以在列标题中使用相同的CSS样式。 - Oleg

@Oleg：谢谢。我尝试了两种方法，但遇到了问题。我更新了问题。 - Andrus

Answer 1

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

我同意，在我的旧答案演示中，列调整大小的问题确实存在。因此我对其进行了改进。此外，我尝试描述在什么情况下重要使用字符换行而不是单词换行。

单词换行的新演示在这里。代码如下：

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”。在此示例中，它是“Software”，“bereitstellung”和“form”。其他语言也可能出现相同的情况，但不太频繁。因此，您将收到以下（不太完美）的图片（请参见here演示）：

你可以看到，“AmountInEUR”，“TaxInEUR”和“TotalInEUR”这些文本被截断了。可以在列文本中包含手动换行符（<br/>），也可以使用我在答案中描述的字符换行。如果我们仅更改上述CSS的th.ui-th-column div，则如下所示。

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

我们将会收到以下结果（请参见演示这里）

顺便提一下，如果文本中包含空格，则某些浏览器（如Google Chrome）中的字符包装会像换行一样工作。因此，演示将在Google Chrome、Safari、Opera和Firefox中以换行的方式显示，但在IE中（包括IE9）相同的演示将被看作

因此，没有一种方法是完美的，但字符换行对于除了Internet Explorer（版本<10）之外的所有现代Web浏览器都具有一些优点。在列文本中使用<br/>或依赖于当前使用的Web浏览器的CSS可以使解决方案更好。

- Oleg

---

如果标题高度增加，头部操作代码也应该从resizeStop事件中执行。 - Andrus

@Andrus：我不确定我是否正确理解了您想要增加的设置。margin-top和margin-bottom可以设置为0：margin-top: 0px; margin-bottom: 0px;。要增加调整大小区域的宽度，可能需要将该区域放置在带有文本的div上方。目前，该区域的宽度为2像素，对应于带有文本的div的padding-right的填充。 - Oleg

可能是因为较新的网格版本，但不确定，但是d.siva在下面提供的CSS答案似乎很简单，并且对我很有效。 - msanjay

@msanjay：我在我的回答中讨论了单词换行和字符换行之间的区别。一些语言（如德语）有语法规则，其中长单词将由多个单词构成。在这种情况下，列标题可以包含一个长单词。在这种情况下，字符换行更加有效，而且（正如我详细描述的那样），如果文本中存在空格，它将被解释为单词换行。此外，我还展示了如何增加可调整大小区域（用于调整列的大小）。您应该自己决定需要哪种换行方式以及是否需要增加可调整大小区域。 - Oleg

@Oleg：抱歉挖出一个旧答案。虽然这对标题文本非常有效，但当viewsortcols设置为始终显示排序箭头时，它会产生一些奇怪的行为。问题有两个方面；图标的宽度不强制换行，如果标题“刚好适合”列的宽度，则右侧看不到它们，而且箭头流到最后一个单词的末尾，而不是保持垂直居中。 - David Culp

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>

- d.Siva

---

非常感谢您的分享！！ - swiftBoy

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

- shalini