溢出

立即下载Kendo UI for jQuery

当Breadcrumb的宽度不足以显示整个路径时组件将只显示适合可用空间的项，其余的将被隐藏起来。如果单击其中一个可见项，则组件的值将更改并显示先前隐藏的项。

下面的示例演示了该特性。

<nav id="breadcrumb" style="width:300px"></nav>

<script>
$("#breadcrumb").kendoBreadcrumb({
items: [
{ type: "rootitem", href: "mysite.com", text: "Telerik UI", icon: "globe", showIcon: true, showText: true },
{ type: "item", href: "/navigation", text: "Navigation", icon: "cloud", showText: true, showIcon: false },
{ type: "item", href: "/breadcrumb1", text: "Folder1", showText: true },
{ type: "item", href: "/breadcrumb2", text: "Folder2", showText: true },
{ type: "item", href: "/breadcrumb3", text: "Folder3", showText: true },
{ type: "item", href: "/breadcrumb4", text: "Folder4", showText: true },
{ type: "item", href: "/breadcrumb5", text: "Folder5", showText: true },
{ type: "item", href: "/breadcrumb6", text: "Folder6", showText: true },
{ type: "item", href: "/breadcrumb7", text: "Folder7", showText: true },
{ type: "item", href: "/breadcrumb8", text: "Folder8", showText: true },
{ type: "item", href: "/breadcrumb9", text: "Folder9", showText: true },
{ type: "item", href: "/breadcrumb10", text: "Folder10", showText: true},
],
editable:true
});
</script>