防止剑道下拉列表的自动换行答案

【问题标题】：Preventing word-wrap for kendo dropdownlist防止剑道下拉列表的自动换行
【发布时间】：2015-10-20 17:14:42
【问题描述】：

我有一个 KendoDropDownList jsFiddle 的示例

var ds = [
    {label:"External Causes of Morbidity, Mortality"},
    {label:"Cardiovascular"},
    {label:"Circulatory System Diseases"},
    {label:"Codes of Special Purposes"},
    {label:"Congenital Anomalies"},
    {label:"Digestive System Diseases"},
    {label:"Easr and Mastoid Process Disease"},
    {label:"Endocrine, Metabolic, Immunity"}];

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds    
});

var ddl = $("#dropdownlist").data('kendoDropDownList').list.width("auto");

如您所见，我将列表的宽度设置为“自动”，但列表中的第一项仍然是自动换行。我认为“自动”值导致窗口适合列表中最大项目的正确大小，还是我必须找出所需的正确宽度并硬编码宽度以防止自动换行？

【问题讨论】：

似乎是某种错误。设置 list.width("auto") 确实会扩展列表宽度，但对于该项目来说还不够。如果您有 Telerik 支持，您可能希望将他们指向您的 jsFiddle，看看他们怎么说。
我在文档中没有看到任何关于 list.width("auto") 的内容 - 你在哪里找到的？设置 #dropdownlist 元素的这个宽度会使其更宽，但我不确定 auto 方法。
我找到了它here 我也在使用它，它在大多数情况下都可以使用，但有时会包裹物品。
再次感谢瑞克。我会确保这样做，因为我有支持。

标签： kendo-ui kendo-asp.net-mvc

【解决方案1】：

您只需要告诉列表项不要换行以及将宽度设置为自动：

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds,    
    dataBound: function(e) {
        e.sender.list.width("auto");
    }
});

.k-list-container .k-list .k-item
{
    padding-right: 25px;
    white-space: nowrap;
}

更新FIDDLE

如果您更喜欢在代码中完成所有操作：

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds,    
    dataBound: function(e) {
        e.sender.list.width("auto").find("li").css({"white-space": "nowrap", "padding-right": "25px"});
    }
});

FIDDLE

注意：右侧填充为垂直滚动条留出空间。

【讨论】：