Ответ 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, которые зависят от используемого в настоящее время веб-браузера, могут значительно улучшить решение.