劍道DropDownList的修剪長文本一行

Question

我用劍道UI網頁的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