title: How to wrap single column header text into multiple lines in jqgrid
body: <p>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.</p>
  
  <p>Only solution which I found is</p>
  
  <p><a href="https://stackoverflow.com/questions/4712763/jqgrid-multiple-column-row-headers/">jQgrid: multiple column row headers</a></p>
  
  <p>but this does not implement word wrap of text.</p>
  
  <p>How to implement word wrap of header text ?</p>
  
  <p>Update. I tried Oleg styles for character and word wrap.</p>
  
  <p>Character wrap</p>
  
  <pre><code>    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
  </code></pre>
  
  <p>}</p>
  
  <p>shows only half of second line. Third line is not shown at all:</p>
  
  <p><img src="https://i.stack.imgur.com/gQ51C.jpg" alt="Character wrap does not show third line"></p>
  
  <p>Word wrap </p>
  
  <pre><code>  th.ui-th-column div{
     white-space:normal !important;
     height:auto !important;
     padding:2px;
     }
  </code></pre>
  
  <p>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.</p>
  
  <p>How to fix those issues ?</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>I tried character wrap (last sample in Oleg reply).
  I found issues if column width is decreased so that more lines appear in header:</p>
  
  <ol>
  <li><p>Column cannot resized if dragging in bottom of column divider: resizer height is not increased on resize.</p></li>
  <li><p>In IE9 header height increase is not sufficient: last header line is not visible after resize. In fireFox this issue does not occur.</p></li>
  </ol>