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

Enable Word-Wrapping for DropDownList Items

Environment

Product Progress® Kendo UI® DropDownList for jQuery

Description

How can I enable word-wrapping for a DropDownList item so that I can wrap the item text if it exceeds a certain width?

Solution

Implement word-wrapping by using CSS.

  #myDropDownList-list.k-popup .k-list .k-item{
    word-wrap: break-word;
    display: block !important;
  }

The following example demonstrates how to wrap words in the DropDownList while the width of the drop-down container is retained and the implementation of a horizontal scrollbar avoided.

    <style>
      /*For a specific Kendo UI DropDownList*/
      #myDropDownList-list.k-popup .k-list .k-item{
        word-wrap: break-word;
        display: block !important;
      }
    </style>

    <input id="myDropDownList" style="width: 110px;" />  
    <script>
      $(document).ready(function() {
        var data = [
          { text: "First", value: "1" },
          { text: "WordWrappingWordWrappingWordWrapping", value: "2" },
        ];

        $("#myDropDownList").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: data,
          index: 0,
          optionLabel: "Select...",
        });
      });
    </script>
    </div>

See Also

In this article