jqgrid long text wrapping

Question

In jqgrid we have long text getting from DB, but need to wrap while displaying in JQgrid, is there any way to wrap long text (with out any spaces)? We have only 110px to spare for payee name field because we have multiple columns needs to be displayed. Our code is like

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

Pls provide solution if any. Thanks in advance.

You should set `white-space: normal !important;` style for the rows. Look at [the answer](http://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-which-works-on-ie7-ie8-and-ff/3006134#3006134). If you need to wrap texts in the column headers see [here](http://stackoverflow.com/questions/3641400/problem-with-wrapping-jqgrid-column-headers-on-ie/3641561#3641561). — Oleg, Jun 28 '11 at 17:22
this works only when we have some space between the words. But I dont have any space and the word is long. — user669789, Aug 02 '11 at 16:09

score 35 · Accepted Answer · edited May 23 '17 at 12:10

35

In case of the test which you need to display has no blanks or other white-space you can't use the CSS style described here and here.

I would recommend you to use another 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>

How you can see from the demo the text "testtesttesttesttesttesttesttesttest" will be displayed as the following:

enter image description here

edited May 23 '17 at 12:10

Community

1
1

answered Aug 02 '11 at 16:40

Oleg

220,925
34
403
798

any way to do word wrap in view model dialog? because i have long text in my fields. If i click on view, it is showing popup with scroll bar. I don't want that. I want to word wrap at there... – CJ Ramki Mar 19 '14 at 13:32
@CJRamki: There are many options. [The answer](http://stackoverflow.com/a/8171924/315935) shows you the main CSS rule which you can use. You can combine it with `max-height` rule like [here](http://stackoverflow.com/a/8378666/315935). – Oleg Mar 19 '14 at 14:21

score 2 · Answer 2 · answered May 20 '13 at 07:16

.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 above code its working. If your not give space also it will break lines

score 1 · Answer 3 · answered Jul 10 '12 at 01:09

1

Above solution didnt worked for me, exaclty as is, but with little modification did! Go to themes/ui.jqgrid.css: search for: .ui-jqgrid tr.jqgrow td : and in the brackets insert:

 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

answered Jul 10 '12 at 01:09

Paschalis

11,929
9
52
82

Was this because of the _order_ of the style sheets in your html? Sounds like you defined your custom style **before** your link to `ui.jqgrid.css` if your style didn't do anything. – Scotty.NET Feb 25 '13 at 10:03
i dont remember quite well right now. I defined my own style for the jqrid! and maybe the order affected this! thanks Scotty! – Paschalis Feb 25 '13 at 17:26

jqgrid long text wrapping

3 Answers3

Linked