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>