How to "crop" text so that the text won't wrap

You can use CSS to "crop" the text displayed.It will hide the text that is longer than the column width. 

<style type="text/css">
.ui-jqgrid tr.jqgrow td {
        white-space:nowrap !important;
}
</style>

Alternatively, a more elegant approach is to use CSS3 "ellipsis" in text-overflow. In below example, anything longer than 135 pixel will be hidden and replaced with ellipsis "..." symbol. When mouse over the text will automatically show the entire text block. 

<style type="text/css">
.ui-jqgrid tr.jqgrow td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 135px;  /* set the width */
}
</style>


Feedback and Knowledge Base