Question

我使用Kendo UI Web DropDownList http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html

（http://docs.telerik.com/kendo-ui/getting-started/web/dropdownlist/overview中的文件）

当文本太长时，DropDownList会自动为该项设置换行符，此项可能为3行。但是，我想要每行一个项目。如何为长文本修剪或显示标题（在末尾包含“..”）。

Answer 1

尝试定义以下CSS：

li.k-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

您可以通过执行以下操作将其限制为仅一个元素：

var dd = $("#list2").kendoDropDownList({
    dataSource: titles
}).data("kendoDropDownList");
dd.list.addClass("ob-ellipsis");

和CSS为

.ob-ellipsis li.k-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

此处示例：http://jsfiddle.net/OnaBai/Yupwj/

Answer 2

我喜欢OnaBai的回答（当然我总是这样做），但另一种选择是为文本属性使用自定义模板并自己处理截断。

<script id="textTemplate" type="text/x-kendo-template">
    # if (data.name.length > 5) { #
        <span>${data.name.substring(0, 5)}...</span>
    # } else { #
        <span>${data.name}</span>
    # } #
</script>

参见示例http://jsbin.com/kotur/1/edit

kendo DropDownList修剪一行的长文本

2 个答案: