Question

目前，我在页面上的一行中有一些kendo组合框，我使用MVVM将值绑定到它。每个Combobox都有相同的模板：

<input data-role="combobox"
    data-auto-bind="false"
    data-text-field="ContactName"
    data-value-field="Id"
    data-value-primitive="true"
    data-placeholder="Select Contact"
    data-bind="value: @valueBinding, source: myContacts, events: { change: onChange }"
    style="width:100%" />

至于可以在移动设备上打开页面，我应该支持文本溢出省略号，例如显示“第一个......”而不是“第一个项目”。

我尝试了下一个解决方案：

1）只需为输入添加css样式：

.k-combobox .k-input {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

此解决方案仅在调整大小时有效，但在页面打开后不起作用。

2）添加新的css类省略号 - 输入

input.ellipses-input{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

将数据加载到组合框后（使用ajax request和kendo.bind）我使用下一个jQuery代码：

$(".my-container input").addClass("ellipses-input");

这里“.my-container”只是组合框的div包装。

有没有办法在没有jQuery的情况下使用CSS来解决这个问题？

如何在kendo组合框中添加溢出值的省略号文本？

0 个答案: