jquery-ui - 如何在jqgrid中将单列标题文本包装为多行

Question

如果列标签文本的宽度大于列宽度，则标签文本将被截断。
由于某些文本较长，因此增加列宽不是很好。
如何使文字自动换行成多行？ header 高度应由最大列高度确定。

我发现的唯一解决方案是

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答复中的最后一个示例)。
我发现如果减小列宽以使标题中出现更多行，则会出现问题:

如果拖动到列分隔符的底部，则无法调整列的大小:调整大小时不会增加调整大小的高度。

在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”(由许多单词组成)。在示例中，它是“软件”，“软件”和“表单”。在其他语言中，同样的情况也是可能的，但是这种情况并不常见。结果，将收到以下(不太完美的)图片(请参阅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会像上图一样在Google Chrome，Safari，Opera和Firefox中显示，并带有自动换行，但是IE(包括IE9)中的相同演示将显示为

因此，没有绝对完美的方法，但是对于所有现代Web浏览器(Internet Explorer(版本<10)除外)，字符换行都具有一些优势。在列文本中使用<br/>或使用CSS(取决于当前使用的Web浏览器)可以使解决方案变得更好。