如何在jqgrid中将单列标题文本包装成多行答案

【问题标题】：How to wrap single column header text into multiple lines in jqgrid如何在jqgrid中将单列标题文本包装成多行
【发布时间】：2011-11-06 23:19:48
【问题描述】：

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

我找到的唯一解决方案是

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 中不会出现此问题。

【问题讨论】：

看看the answer。所以在列标题中的包装与cells 中的包装相同。此外，可以实现 character 包装，请参阅here。如果需要，可以在列标题中使用相同的 CSS 样式。
@Oleg：谢谢。我尝试了这两种方法，但都遇到了问题。我更新了问题。

标签： jquery-ui jqgrid

【解决方案1】：

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

我同意我的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）中同样的demo会被视为

所以没有办法是绝对完美的，但是字符换行对于所有现代网络浏览器都有一些优势，除了 Internet Explorer（版本 <br/> 或使用依赖于当前使用的Web 浏览器的CSS 可以使解决方案更好。

【讨论】：

非常感谢。我标记并赞成答案。我也遇到了一些问题并更新了关于这些的问题
如果标题高度增加，也应该从 resizeStop 事件执行标题操作代码
@Andrus：不客气！我完全同意top 和height 参数的重新计算应该在resizeStop 事件上完成。我会更改演示的代码，让其他人在开始时使用更好的代码。
看来resize span 宽度也太小了，resize 需要presice 定位。也许也让它更宽一些。
@Andrus：我不确定我是否正确理解您想要增加的设置。 margin-top 和 margin-bottom 可以设置为 0：margin-top: 0px; margin-bottom: 0px;。要增加调整大小区域的width，可能会使用文本使区域超过 div。目前该区域的宽度为 2px，对应于 div 的 padding-right 与文本的填充。

【解决方案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>

【讨论】：

非常感谢您分享这个！！

【解决方案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;
        }

【讨论】：