Cómo envolver el texto del encabezado de una columna en varias líneas en jqgrid

Si el texto de la etiqueta de la columna es más ancho que el ancho de la columna, el texto de la etiqueta se trunca. Aumentar el ancho de la columna no es bueno, ya que algunos textos son largos. ¿Cómo hacer el ajuste de texto a palabra en múltiples líneas? La altura del encabezado debe determinarse por la altura máxima de la columna.

La única solución que encontré es

jQgrid: encabezados de fila de columnas múltiples

pero esto no implementa el ajuste de palabras del texto.

¿Cómo implementar el ajuste de palabras del texto del encabezado?

Actualizar. Probé estilos de Oleg para el ajuste de caracteres y palabras.

Envoltura de personaje

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 

}

muestra solo la mitad de la segunda línea. La tercera línea no se muestra en absoluto:

El ajuste de caracteres no muestra la tercera línea

Ajuste de línea

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

deshabilita el cambio de tamaño de columna para columnas envueltas. En esas columnas, mover el icono del mouse al cursor del divisor de columna no cambia a Sizer. Las columnas envueltas no se pueden redimensionar.

¿Cómo solucionar esos problemas?

Actualización 2

Intenté el ajuste de caracteres (última muestra en la respuesta de Oleg). Encontré problemas si el ancho de la columna se reduce para que aparezcan más líneas en el encabezado:

  1. La columna no se puede cambiar de tamaño si se arrastra en la parte inferior del divisor de columna: la altura del ajuste de tamaño no aumenta al cambiar el tamaño.

  2. En IE9, el aumento de la altura del encabezado no es suficiente: la última línea de encabezado no es visible después del cambio de tamaño. En firefox este problema no ocurre.

En su ejemplo con el ajuste de caracteres, olvidó usar !important después de la height: auto ajuste height: auto .

Estoy de acuerdo en que el problema con el tamaño de la columna realmente existe en mi demo de la respuesta anterior . Entonces lo mejoré. Además, trato de describir en qué situaciones puede ser importante utilizar el ajuste de caracteres en lugar del ajuste de palabras.

La nueva demostración con la palabra envoltura está aquí . el código es el siguiente:

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

Utiliza el siguiente CSS

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

y produce la siguiente imagen

enter image description here

(
después de cada personaje en la primera columna para hacer que el texto “Inv No” se coloque en muchas filas).

Todo se ve muy bien, pero puede haber algunas situaciones en las que puede una palabra muy larga en el encabezado de la columna. Algunos lenguajes como el alemán construyen a veces palabras largas como “Softwareberetstellungsform” que consisten en muchas palabras. En el ejemplo, era “Software”, “bereitstellung” y “forma”. En otros idiomas, la misma situación también es posible, pero no tan frecuente. Como resultado, recibirá la siguiente imagen (menos perfecta) (vea la demostración aquí ):

enter image description here

Puede ver que los textos “AmountInEUR”, “TaxInEUR” y “TotalInEur” están cortados. Uno puede incluir frenos de línea manuales (
) en el texto de la columna o usar el ajuste de caracteres que describí en la respuesta . Si cambiamos solo el CSS descrito anteriormente para th.ui-th-column div a la siguiente

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

recibiremos los siguientes resultados (ver la demostración aquí )

enter image description here

Por cierto, el ajuste de caracteres funciona en algunos navegadores como Google Chrome como ajuste de palabras (!!!) si el texto contiene espacios. Así que la demostración se mostrará en Google Chrome, Safari, Opera, Firefox como en la imagen de arriba con la palabra envoltura, pero la misma demostración en IE (incluido IE9) se verá como

enter image description here

Por lo tanto, no hay forma de que sea absolutamente perfecto, pero el ajuste del carácter tiene algunas ventajas para todos los navegadores web modernos con la excepción de Internet Explorer (versión <10). El uso de
dentro del texto de la columna o el uso de CSS que dependen del navegador web actualmente utilizado puede mejorar la solución.

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