如何将单列标题文本换行到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;
   }

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

如何解决这些问题？

更新2

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

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

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

Answer 1

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

Answer 2

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