В вашем примере с переносом символов вы забыли использовать !important после настройки height: auto.
Я согласен, что проблема с изменением размера столбцов действительно существует в моей демонстрации из моего старого ответа . Так что я улучшил это. Более того, я пытаюсь описать, в каких ситуациях может быть важно использовать перенос символов вместо переноса слов.
Новая демонстрация со словом «обтекание» здесь . код следующий:
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» и «form». На других языках такая же ситуация возможна, но не так часто. В результате вы получите следующую (менее совершенную) картинку (см. Демонстрацию здесь ):
Вы видите, что тексты "AmountInEUR", "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). Использование <code><br/> внутри текста столбца или использование CSS, которое зависит от используемого в настоящее время веб-браузера, может сделать решение намного лучше.