我如何将网格线包装到剑道 ui 网格中的限制答案

【问题标题】：how do i wrap a grid line to the with limit in kendo ui grid我如何将网格线包装到剑道 ui 网格中的限制
【发布时间】：2023-04-03 21:06:01
【问题描述】：

这是 mvc 中剑道网格的示例我想在网格中对列进行文本换行。有人可以帮忙吗？我已经尝试过使用 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;
}

【问题讨论】：

标签： javascript asp.net-mvc razor kendo-ui kendo-grid

【解决方案1】：

试试这个，它会起作用的：

word-wrap: break-word;

或

word-break: break-all;

【讨论】：

【解决方案2】：

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

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

如果您的列之一是，例如，电子邮件地址，并且您有一个完整的长字符串，您会特别遇到这个问题。

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

【讨论】：

【解决方案3】：

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

.txtovflw
{
   white-space: normal;
}

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

【讨论】：

【解决方案4】：

要在网格中换行单个列，请创建一个 CSS 类。

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

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

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

【讨论】：

【解决方案5】：

将以下css 添加到您的代码中，它将应用于所有网格列，您无需将样式属性添加到单个网格列。

<style>
    .k-grid td {
        word-break: break-all !important;
        word-wrap: break-word !important;
    }
</style>

【讨论】：