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>