如何在jqgrid中将单列标题文本包装成多行 [英] How to wrap single column header text into multiple lines in jqgrid

问题描述

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

我发现的唯一解决方案是

.所以我改进了它.此外，我尝试描述在哪些情况下使用字符换行而不是自动换行很重要.

带自动换行的新演示在):

您可以看到文本AmountInEUR"、TaxInEUR"和TotalInEUR"被截断了.可以在列文本中包含手动换行符 (<br/>) 或使用我在 将在 Google Chrome、Safari、Opera、Firefox 和上图一样有自动换行，但在 IE(包括 IE9)中同样的 demo 会被视为

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

If column label text is wider than column width, label text is truncated. Increasing column width is not nice since some texts are long. How to make text to word wrap into multiple lines? Header height should be determined by maximum column height.

Only solution which I found is

jQgrid: multiple column row headers

but this does not implement word wrap of text.

How to implement word wrap of header text ?

Update. I tried Oleg styles for character and word wrap.

Character wrap

    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

}

shows only half of second line. Third line is not shown at all:

Word wrap

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

disables column resize for wrapped columns. On those columns moving mouse icon to column divider mouse cursor does not change to sizer. Wrapped columns cannot resized.

How to fix those issues ?

Update 2

I tried character wrap (last sample in Oleg reply). I found issues if column width is decreased so that more lines appear in header:

1. Column cannot resized if dragging in bottom of column divider: resizer height is not increased on resize.

2. In IE9 header height increase is not sufficient: last header line is not visible after resize. In fireFox this issue does not occur.

解决方案

In your example with character wrapping you forgot to use !important after the height: auto setting.

I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.

The new demo with the word wrapping is here. the code is the following:

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

It use the following CSS

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

and produce the following picture

(I included <br/> after every character in the first column to make the text "Inv No" by placed on many rows).

Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):

You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div to the following

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

we will receive the following results (see the demo here)

By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as

So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/> inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.

这篇关于如何在jqgrid中将单列标题文本包装成多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！