如何在 kendo ui 网格中显示长单元格值的省略号？答案

【问题标题】：How to show ellipsis for long cell values in kendo ui grid?如何在 kendo ui 网格中显示长单元格值的省略号？
【发布时间】：2014-07-23 08:54:06
【问题描述】：

我试图在剑道网格中显示长值的省略号。根据 Telerik 论坛，我需要在 css 中设置以下内容

.k-grid td
{
overflow: hidden;
text-overflow: ellipsis;
}

我正在尝试在网格的数据绑定事件中设置样式，如下所示

var grid = $("#kendoGrid").kendoGrid({
        columns: columnConfiguration,
        dataBound: function (e) {
$("#kendoGrid td").css("overflow", "hidden");                               
$("#kendoGrid td").css("text-overflow", "ellipsis");
},......other events and functions

但这不起作用。网格仍然没有显示省略号。

我该怎么做才能显示省略号。注意：我不能把它放在 css 文件中。

【问题讨论】：

标签： css kendo-ui kendo-grid

【解决方案1】：

添加到 CSS white-space: nowrap;

.k-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在此处查看实际操作：Fiddle

【讨论】：

有什么方法可以显示省略号内容的工具提示吗？
此代码是否特定于 IE 11？该样式不适用于 IE 10。
刚刚在 IE10.0.9200.16921 中测试了我的 Fiddle 并且工作正常。不，它不应该特定于 IE11，因为这是旧的 CSS (CSS1)
在内联编辑网格中，我还必须添加 .k-grid table { table-layout: fixed; }
@OnaBai 参考您的 jsfiddle 示例：有没有办法动态实现相同的目标，即。对于每一列，或者只是在动态构建网格并且您并不总是知道列名时？

【解决方案2】：

我不熟悉剑道，但他们演示的快速测试（使用萤火虫）似乎显示该设置：

text-overflow: ellipsis
white-space: nowrap

因为 CSS 属性应该可以解决问题。

【讨论】：

哪个演示？可以给我链接吗？
我正在设置相同的属性，但尝试在 databiund 事件中进行设置，因为我无法在 css 中设置它。
对于工具提示，您可以尝试在上设置“标题”属性。大多数浏览器会将其呈现为工具提示

【解决方案3】：

你需要创建一个css Class，然后绑定到KendoGrid的dataBound属性中

Working Fiddle

代码片段：

    dataBound:function() {
        $('td').each(function(){
            $(this).addClass('ellipsisClass')
        })
    }

CSS 类：

.ellipsisClass {
    text-overflow: ellipsis;
    overflow: hidden;
}

【讨论】：

就我而言，我必须添加 white-space: nowrap 才能使其工作。不过感谢您的帮助。
@syd：以为你想要它在函数中而不是在 cssClass 中应用它。很乐意提供帮助

【解决方案4】：

我在剑道网格中显示省略号时也遇到了问题，我已经尝试了上述所有答案，但均未成功。我的解决方案非常简单：这个 css 类（文本溢出：省略号）被代码中的另一个 css 设置覆盖！这个类是从剑道设置为默认的！所以省略号应该是开箱即用的！因此，如果有人遇到同样的问题，请先检查以下内容：

Scrollable() 网格属性是否已激活？
是否有任何 css Settings 阻止显示它？

希望这个额外的答案对某人有所帮助...

【讨论】：

【解决方案5】：

接受的解决方案似乎对我不起作用。文本未隐藏，导致行数很大。我尝试了以下方法：

.k-grid td
{
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这样，文本显示在一行中并显示省略号。

【讨论】：