如何在ASP.NET Core Telerik Grid中设置固定行高并隐藏溢出内容？

要让Telerik Grid保持固定行高，避免单元格多行/过长字符串拉伸行高，只需通过自定义CSS配合Grid配置即可实现，具体步骤如下：

1. 给Grid添加自定义CSS类 #

在Grid的HtmlAttributes中添加一个自定义类（比如fixed-row-grid），方便后续定位样式：

@(
Html.Kendo().Grid<GuideViewModel>()
    .Name("gridGuides")
    .ToolBar(t => t.Search()) // 启用搜索面板
        .ToolBar(e =>
     {
         e.Custom().Text("Vytvořit nové").IconClass("k-i-plus").HtmlAttributes(new { id = "guideCreateButton", @class = "k-button k-button-md k-rounded-md k-button-solid-primary" });
     })
    .Search(s =>
    {
        s.Field(c => c.Name);
        s.Field(c => c.Cause);
        s.Field(c => c.Solution);
        s.Field(c => c.Comment);
    })
    .Columns(columns =>
    {
        columns.Command(command =>
        {
            command.Custom("Details").Click("detailsClickGuides").Text("Detaily").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid-primary hide-text-button" }).IconClass("k-icon k-i-info-circle");
            command.Custom("Edit").Click("editClickGuides").Text("Editovat").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid hide-text-button" }).IconClass("k-icon k-i-pencil");
            command.Custom("Delete").Click("deleteClickGuides").Text("Smazat").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid hide-text-button" }).IconClass("k-icon k-i-trash");
        }).Title("Actions").Width(180);
        columns.Bound(model => model.Name).Width(180);
        columns.Bound(model => model.Cause).Width(180).Encoded(false);
        columns.Bound(model => model.Solution).Width(180).Encoded(false);
        columns.Bound(model => model.Comment).Width(180);
        columns.Bound(model => model.IsActive).Width(180);
    })
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .HtmlAttributes(new { style = "min-height: 200px;", @class = "fixed-row-grid" }) // 新增自定义类
    .Filterable(ftb => ftb.Extra(false).Operators(op => op.ForString(str => str.Clear().Contains("Contains"))))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Filter(filter => filter.Add(a => a.IsActive).IsEqualTo(true))
        .Read(read => read.Action("GuidesRead", "Guides", new { companyId = optionalIDCompany, branchId = optionalIDBranch }))
    )
)

2. 编写CSS样式控制行高与溢出 #

根据需求选择以下两种样式方案：

方案一：强制单行显示，溢出显示省略号 #

适合希望内容单行展示，超出部分用省略号标记的场景：

/* 固定Grid行高，隐藏溢出内容 */
.fixed-row-grid .k-grid-content td {
    height: 40px; /* 设置固定行高，可根据需求调整 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 强制内容不换行 */
    text-overflow: ellipsis; /* 溢出部分显示省略号 */
    line-height: 40px; /* 让文字垂直居中，与行高保持一致 */
}

/* 单独调整命令列，避免按钮被截断 */
.fixed-row-grid .k-grid-content td.k-command-cell {
    height: auto; /* 命令列允许自适应按钮高度，或设置与其他单元格一致的固定高度 */
    white-space: normal;
}

方案二：允许显示指定行数，超出隐藏 #

适合希望展示多行内容（比如2行），超出部分隐藏的场景：

.fixed-row-grid .k-grid-content td {
    height: 60px; /* 对应2行的高度，根据行高调整（行高30px * 2） */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示行数 */
    -webkit-box-orient: vertical;
    line-height: 30px; /* 每行的行高 */
}

/* 命令列单独处理 */
.fixed-row-grid .k-grid-content td.k-command-cell {
    height: auto;
    display: block;
    -webkit-line-clamp: unset;
}

说明 #

• 行高数值可根据UI设计需求自行调整，单行场景下确保line-height与height一致可保证文字垂直居中。
• 命令列单独处理是避免操作按钮被截断，若命令列按钮高度与设置的行高匹配，也可以去掉命令列的单独样式。

内容的提问来源于stack exchange，提问作者Zokinko