Crop DropDownList Text

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can the I crop the text of items in a DropDownList and show an ellipsis if they are longer than the width of the drop-down?

Solution

Use the white-space, overflow, and text-overflow CSS properties.

    <style>
        li.k-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
    </style>

    <h4>Products</h4>
    <input id="products" style="width: 200px" />

    <script>
      $(document).ready(function() {
        $("#products").kendoDropDownList({
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: {
            transport: {
              read: {
                dataType: "jsonp",
                url: "https://demos.telerik.com/kendo-ui/service/Products",
              }
            }
          }
        });
      });
    </script>