kendo DropDownList 为一行修剪长文本答案

【问题标题】：kendo DropDownList trim long text for one linekendo DropDownList 为一行修剪长文本
【发布时间】：2014-03-03 11:45:06
【问题描述】：

我使用 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 行。但是，我想要每行一个项目。如何修剪或显示长文本的标题（最后包含“..”）。

【问题讨论】：

标签： drop-down-menu kendo-ui substring

【解决方案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/

【讨论】：

【解决方案2】：

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

<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

【讨论】：