1

这是 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;
}
4

5 回答 5

2

试试这个，它会工作：

word-wrap: break-word;

或者

断词：打破一切；

于 2014-03-05T06:40:03.260 回答
1

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

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

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

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

于 2016-11-18T22:40:26.277 回答
0

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

.txtovflw
{
   white-space: normal;
}

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

于 2014-10-02T15:21:29.353 回答
0

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

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

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

columns.Bound(a => a.Description).Width(100)
     .HtmlAttributes(new { @class = "wordWrapGridColumn" });
于 2017-11-07T20:23:54.310 回答
0

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

<style>
    .k-grid td {
        word-break: break-all !important;
        word-wrap: break-word !important;
    }
</style>
于 2021-08-27T05:16:53.637 回答