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

Question

我正在尝试在kendo网格中显示长值的省略号。 根据telerik论坛，我需要在css中设置folling

.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文件中。

Answer 1

添加到CSS white-space: nowrap;

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

在此处查看此行动：Fiddle

Answer 2

我对剑道并不熟悉，但是对他们的演示进行了快速测试（使用firebug） 显示设置：

text-overflow: ellipsis
white-space: nowrap

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

Answer 3

您需要创建一个css类，然后将其绑定到KendoGrid的dataBound属性中

Working Fiddle

代码段：

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

CSS类：

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

Answer 4

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

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

希望这个额外的答案能帮到某些人......

Answer 5

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

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

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