Как обернуть текст заголовка одного столбца в несколько строк в jqgrid

Если текст метки столбца шире ширины столбца, текст меток усекается. Увеличение ширины столбца не очень приятно, так как некоторые тексты длинны. Как преобразовать текст в слово в несколько строк? Высота заголовка должна определяться максимальной высотой столбца.

Единственное решение, которое я нашел, -

jQgrid: заголовки столбцов нескольких столбцов

но это не реализует перенос слов текста.

Как реализовать перенос слов заголовка?

Update. Я пробовал стили Олега для переноса символов и слов.

Обертка символов

    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

}

показывает только половину второй строки. Третья строка вообще не отображается:

Печать в формате Word

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

отключает изменение размера столбца для обернутых столбцов. На этих столбцах перемещение курсора мыши на курсор мыши делителя курсора не изменяется на sizer. Обрезанные столбцы не могут быть изменены.

Как устранить эти проблемы?

Обновление 2

Я попробовал обернуть персонаж (последний пример в Олеге). Я обнаружил проблемы, если ширина столбца уменьшена, так что в заголовке появляется больше строк:

Столбец не может быть изменен при перетаскивании в нижней части разделителя столбцов: высота изменения размера не увеличивается при изменении размера.
В увеличении высоты заголовка IE9 недостаточно: последняя строка заголовка не отображается после изменения размера. В fireFox эта проблема не возникает.

Ответ 1

В вашем примере с оберткой символов вы забыли использовать !important после установки height: auto.

Я согласен с тем, что проблема с редактором столбцов действительно существует в моей демонстрации из моего старого ответа . Поэтому я улучшил его. Более того, я пытаюсь описать, в каких ситуациях может быть важно использовать обертку символов вместо переноса слов.

Новое демо со словом wrapper здесь. код следующий:

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" был помещен во многие строки).

Все выглядит очень хорошо, но в некоторых ситуациях вы можете one очень длинное слово в заголовке столбца. Некоторые языки, такие как немецкий, создают иногда длинные слова, такие как "Softwareberetstellungsform", которые состоят из многих слов. В этом примере это "Программное обеспечение", "bereitstellung" и "form". На других языках такая же ситуация возможна, но не так часто. В результате получится следующая (менее совершенная) картина (см. Демонстрацию здесь):

Вы можете видеть, что тексты "СуммаInEUR", "TaxInEUR" и "TotalInEUR" отключены. В тексте столбца можно включить ручные линейные тормоза (<br/>) или использовать перенос символов, который я описал в . Если мы изменим только описанный выше CSS для th.ui-th-column div на следующий

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

мы получим следующие результаты (см. демонстрацию здесь)

Кстати, обертка символов работает в некоторых браузерах, таких как Google Chrome, как перенос слов (!!!), если текст содержит пробелы. Итак, демонстрация будет отображаться в Google Chrome, Safari, Opera, Firefox, как на рисунке выше, с переносом слов, но та же демонстрация в IE (включительно IE9) будет рассматриваться как

Таким образом, ни один из способов не является абсолютно идеальным, но обертка символов имеет некоторые преимущества для всех современных веб-браузеров с исключением Internet Explorer (версия < 10). Использование <br/> внутри текста столбца или использование CSS, которые зависят от используемого в настоящее время веб-браузера, могут значительно улучшить решение.

Ответ 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;
        }