jquery - Kendo UI 组合框截断值的初始空间

Question

我们如何显示组合框值的初始空间？例如

“World”
“  America”
“     Washington”

当我尝试 Kendo ui 组合框时，它会自动删除空间并显示如下：

“World”
“America”
“Washinton”

一个工作的例子会很棒。

Answer 1

这实际上并不特定于 Kendo UI；空白在 HTML 中被折叠。

你可以使用 CSS：

.whitespace {
    white-space: pre;
}

然后使用模板创建您的小部件（或将类应用于.km-animation-container包装选项的元素）：

var data = [{
    text: "Item1",
    value: "1"
}, {
    text: "   Item2",
    value: "2"
}, {
    text: "                  Item3",
    value: "3"
}];

$("#input").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    template: "<span class='whitespace'> #= data.text # </span>",
    // if you want the display value to show the white space as well, 
    // you can additionally use a value template:
    valueTemplate: "<span class='whitespace'> #= data.text # </span>"
});

（演示）