Question

我有kendo网格，我的问题是当文本太长时间我无法使该文本断行，我试图制作CSS但它不能很好地工作。这是我的css：

    #projectslistgrid .k-grid-content  td{
    word-wrap:break-word;
}

这是图片：

请帮帮我，谢谢。

Answer 1

请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" />

    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
    <style>
        .breakWord120 {
            /*max-width: 120px !important;*/
            word-break: break-all !important;
            word-wrap: break-word !important;
            /*vertical-align: top;
            line-height: 15px;*/
        }
    </style>
</head>
<body>


    <div id="example">
        <div id="grid"></div>

        <script>

            var products = [{
                ProductID: 1,
                ProductName: "Chai",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "10 boxes x 20 bags",
                UnitPrice: 18.0000,
                UnitsInStock: 39,
                UnitsOnOrder: 0,
                ReorderLevel: 10,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 2,
                ProductName: "Chang",
                SupplierID: 1,
                CategoryID: 1,
                QuantityPerUnit: "24 - 12 oz bottles",
                UnitPrice: 19.0000,
                UnitsInStock: 17,
                UnitsOnOrder: 40,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 1,
                    CategoryName: "Beverages",
                    Description: "Soft drinks, coffees, teas, beers, and ales"
                }
            }, {
                ProductID: 3,
                ProductName: "AniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrup",
                SupplierID: 1,
                CategoryID: 2,
                QuantityPerUnit: "12 - 550 ml bottles",
                UnitPrice: 10.0000,
                UnitsInStock: 13,
                UnitsOnOrder: 70,
                ReorderLevel: 25,
                Discontinued: false,
                Category: {
                    CategoryID: 2,
                    CategoryName: "Condiments",
                    Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
                }
            }];

            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 550,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "ProductName", title: "ProductName", attributes: {
                                "class": "breakWord120",

                            }
                        },
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
                        { field: "UnitsInStock", title: "Units In Stock" },
                        { field: "Discontinued" }
                    ]
                });
            });
        </script>
    </div>


</body>
</html>

如果有任何疑虑，请告诉我。

如何在kendo网格中包装文本

1 个答案: