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

Enable Word-Wrapping for DropDownList Items


Product Progress® Kendo UI® DropDownList for jQuery


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


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.

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

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

          dataTextField: "text",
          dataValueField: "value",
          dataSource: data,
          index: 0,
          optionLabel: "Select...",

See Also

In this article