如何在剑道网格中换行
Min*_*oan 0 css telerik telerik-grid kendo-ui kendo-grid
我有剑道网格，我的问题是当文本太长时，我无法使该文本断行，我尝试制作 css，但效果不佳。这是我的CSS：
#projectslistgrid .k-grid-content td{
word-wrap:break-word;
}
这是图像：
请帮帮我，谢谢。
请尝试使用以下代码片段。
<!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>
如果有任何问题，请告诉我。
- 不知道最初的提问者发生了什么，但这完美地解决了我的类似问题。谢谢！ (3认同)
| 归档时间： |
|
| 查看次数： |
7306 次 |
| 最近记录： |