New to Kendo UI for jQuery? Download free 30-day trial

Prevent Text Wrapping in the Grid


Product Progress® Telerik® UI Grid for ASP.NET MVC
Product Version 2017.3.1026


How can I prevent the text wrapping of a Grid item in a single-line stop?


Use the following CSS implementation to prevent wrapping in all grid cells.

.k-grid td{
  white-space: nowrap;

Use the following implementation to prevent wrapping in specific grid cells.

  1. Use the attributes configuration of the grid to add a class to specific columns.
  2. Prevent wrapping only for the elements with the specified class.
    <div id="grid"></div>
        $(document).ready(function() {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: ""
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                height: 550,
                reorderable: true,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                            title: "OrderID",
                        filterable: false
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        attributes: {class: "nowrap"}, // Add the nowrap class to the attributes of the column.
                        width: 100,
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 110

      .k-grid .nowrap {
        white-space: nowrap;
In this article