Jqgrid long text packaging

In jqgrid we have long text obtained from the database, but need to wrap while it is displayed in JQgrid, is there a way to wrap long text (without any spaces)? We only have 110px for the recipient name field, because we need to display multiple columns. Our code is similar to

{name:"firstPayeeName",index:"firstPayeeName", width:"110px", align:"left", sorttype:"string"}, 

Pls provide a solution, if any. Thanks in advance.

+10
text wrapping jqgrid
Jun 28 '11 at 16:50
source share
3 answers

In the case of the test you need to display, there are no spaces or another space , you cannot use the CSS style described here and here .

I would recommend you use a different CSS style:

 <style type="text/css"> .ui-jqgrid tr.jqgrow td { 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 } </style> 

As you can see from the demo, the text "testtesttesttesttesttesttesttesttest" will be displayed as follows:

enter image description here

+29
Aug 02 '11 at 16:40
source share

The above solution did not work for me, exaccty as it is, but with a few changes did! Go to topics /ui.jqgrid.css: search: .ui-jqgrid tr.jqgrow td: and insert in brackets:

  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 
+1
Jul 10 2018-12-12T00:
source share
 .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; } 

Use the code above to work it. If your gives no place, he will also break the lines

+1
May 20 '13 at 7:16
source share



All Articles