如何将网格线包装到kendo ui网格中的限制

Question

这是mvc中的kendo网格示例我想在网格中对文本进行文本换行。 有人可以帮忙吗？ 我已经尝试过使用css但仍然无法正常工作。 这条生产线正在开箱即用......

columns.Bound(o => o.SectionClass).Width(100).Title("Class");
                        columns.Bound(o => o.Title).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.Description).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.DueDate).Width(80).Title("Due Date");
                        columns.Template(e => { }).ClientTemplate(
                         "<a onclick=\"ViewHW( '#=data.SectionHomeWorkId#')\" id=\"viewHW\" class=\"view-grid-img grid-view-btn\" title=\"View\" data-id=\"<#= data.SectionHomeWorkId
#>\">View</a>")
                         .Title("View")
                         .Width(50);
                    })

.txtovflw
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Answer 1

试试这个，它会起作用：

word-wrap: break-word;

要么

分手：打破一切;

Answer 2

您使用.txtovflw类在正确的轨道上，但请确保将表格布局设置为固定以防止表格溢出其容器。

.k-grid table {
    table-layout: fixed;
}

如果您的某个列是，例如，电子邮件地址，并且您有一个长的不间断的单个字符串，您将特别遇到此问题。

资料来源： http ： //www.telerik.com/forums/how-can-i-get-ellipsis-instead-of-wrapping

Answer 3

如果要将列内容保留在列中，则需要使用white-space：normal

.txtovflw
{
   white-space: normal;
}

但默认情况下，剑道通常会这样做。

Answer 4

要对网格中的单个列进行自动换行，请创建一个CSS类。

.wordWrapGridColumn {
    overflow: visible !important;
    white-space: normal !important;
}

然后使用HtmlAttributes将类添加到列中。

columns.Bound(a => a.Description).Width(100)
     .HtmlAttributes(new { @class = "wordWrapGridColumn" });