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

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

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

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

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

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

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

Перенос символа

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

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

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

Обновление 2

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

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

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