New to Kendo UI for jQuery? Download free 30-day trial

Crop DropDownList Text


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


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?


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

        li.k-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

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

      $(document).ready(function() {
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: {
            transport: {
              read: {
                dataType: "jsonp",
                url: "",
In this article