Kendo ui 如何包装剑道网格列

剑道网格列如下所示。在做缩放屏幕后，列被隐藏，我想做换行列。我们可以给gridColumns一些属性吗。请告诉我。我找不到它。这里“你的职业详细信息”正在被隐藏。这里还有一些字段，我只给出了三个字段

 gridColumns: [
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '0', hidden: true
            },
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '250px'
            },
            {
                title: 'Your Occupation Details',
                field: 'OccupationDetails',
                width: '100',
            }]

---

您可以设置网格的CSS属性以启用列换行

.k-grid-header .k-header {
    overflow: visible;
    white-space: normal;
}

请参阅本文档，了解如何设置列标题属性

---

使用headerAttributes在JS columns声明中包装长列名，如下所示

columns: [
{
  title: 'Your Occupation Details',
  field: 'OccupationDetails',
  width: '100',
  headerAttributes: { style: "white-space: normal"}
},
...
]

或者，对于强类型网格，也可以在列中使用HeaderHtmlAttributes

columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
    new { style = "white-space: normal" }
);

更多的文档可以在Telerik的官方论坛上找到，这对我很有用

.k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
}

还有这个

.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

来源：

.k-grid.k-grid-header.k-header.k-link{
溢出：可见！重要；空白：正常！重要；
}

要包装标题：

.k-grid .k-grid-header .k-header .k-link { height: auto; }

.k-grid .k-grid-header .k-header { white-space: normal; }

要换行，请执行以下操作：

td[role="gridcell"] { white-space: nowrap; }

您可以这样做：

   k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
    word-break:break-all !important;
    word-wrap:break-word !important;
}
.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

---

非常适合我。

如果需要扭曲特定网格列标题的文本，可以将其添加到自定义CSS中。这对我有用

#yourgrid .k-grid-header  .k-header .k-link {
    white-space: normal !important; 
} 

---

@user1078749我不知道为什么这不是答案？

#yourgrid .k-grid-header  .k-header .k-link {
    white-space: normal !important; 
}