猿问
下载APP

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

如何将单列标题文本换行到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中,此问题不会发生。


九州编程
浏览 55回答 3
3回答

慕虎7371278

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

慕田峪7331174

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

123456qqq

在您的字符包装示例中,您忘记!important在height: auto设置后使用。我同意列调整器的问题确实存在于我的演示中,来自我的旧答案。所以我改进了它。此外,我尝试描述在哪些情况下使用字符包装而不是自动换行很重要。带有自动换行的新演示就在这里。代码如下:var&nbsp;grid&nbsp;=&nbsp;$("#list"),&nbsp;headerRow,&nbsp;rowHight,&nbsp;resizeSpanHeight;grid.jqGrid({ &nbsp;&nbsp;&nbsp;&nbsp;...});//&nbsp;get&nbsp;the&nbsp;header&nbsp;row&nbsp;which&nbsp;containsheaderRow&nbsp;=&nbsp;grid.closest("div.ui-jqgrid-view") &nbsp;&nbsp;&nbsp;&nbsp;.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");//&nbsp;increase&nbsp;the&nbsp;height&nbsp;of&nbsp;the&nbsp;resizing&nbsp;spanresizeSpanHeight&nbsp;=&nbsp;'height:&nbsp;'&nbsp;+&nbsp;headerRow.height()&nbsp;+ &nbsp;&nbsp;&nbsp;&nbsp;'px&nbsp;!important;&nbsp;cursor:&nbsp;col-resize;';headerRow.find("span.ui-jqgrid-resize").each(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.style.cssText&nbsp;=&nbsp;resizeSpanHeight;});//&nbsp;set&nbsp;position&nbsp;of&nbsp;the&nbsp;dive&nbsp;with&nbsp;the&nbsp;column&nbsp;header&nbsp;text&nbsp;to&nbsp;the&nbsp;middlerowHight&nbsp;=&nbsp;headerRow.height();headerRow.find("div.ui-jqgrid-sortable").each(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ts&nbsp;=&nbsp;$(this); &nbsp;&nbsp;&nbsp;&nbsp;ts.css('top',&nbsp;(rowHight&nbsp;-&nbsp;ts.outerHeight())&nbsp;/&nbsp;2&nbsp;+&nbsp;'px');});它使用以下CSSth.ui-th-column&nbsp;div&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;normal&nbsp;!important; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto&nbsp;!important; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;2px;}并产生以下图片(我<br/>在第一列中的每个字符后面都包含了将文本“Inv No”放在许多行上)。一切看起来都很好,但在某些情况下,你可以在列标题中使用一个很长的单词。有些像德语这样的语言有时构建像“Softwareberetstellungsform”这样的长词,它们来自许多单词。在示例中,它是“软件”,“bereitstellung”和“形式”。在其他语言中,同样的情况也是可能的,但不是那么频繁。因此,您将收到以下(不太完美)的图片(请参阅此处的演示):您可以看到文本“AmountInEUR”,“TaxInEUR”和“TotalInEUR”被截断。可以<br/>在列文本中包含手动线制动器()或使用我在答案中描述的字符包装。如果我们仅将上述CSS&nbsp;改为以下内容th.ui-th-column divth.ui-th-column&nbsp;div&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;white-space:&nbsp;pre-wrap;&nbsp;/*&nbsp;CSS3&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;-moz-pre-wrap;&nbsp;/*&nbsp;Mozilla,&nbsp;since&nbsp;1999&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;-pre-wrap;&nbsp;/*&nbsp;Opera&nbsp;4-6&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;white-space:&nbsp;-o-pre-wrap;&nbsp;/*&nbsp;Opera&nbsp;7&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto&nbsp;!important; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle;}我们将收到以下结果(请参阅此处的演示)顺便说一句,如果文本包含空格,角色包装在谷歌浏览器等浏览器中的工作方式为自动换行(!!!)。因此,演示将显示在谷歌浏览器,Safari,Opera,Firefox中,如上图所示,带有自动换行功能,但IE中的相同演示(包括IE9)将被视为所以没有办法绝对完美,但字符包装对于所有现代Web浏览器都有一些优势,Internet Explorer(版本<10)除外。的使用<br/>列文本或依赖于当前使用的网络浏览器CSS的使用内可以使解决方案更好。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答