Skip to content

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