kb(Dropdowns): Add KB for disabled text wrapping

_contentTemplates/common/dropdowns-virtualization.md

@@ -12,7 +12,7 @@ This section will explain the parameters and behaviors that are related to the v
 
 * `ScrollMode` - `Telerik.Blazor.DropDownScrollMode` - set it to `DropDownScrollMode.Virtual`. It defaults to the "regular" scrolling.
 * `Height` - `string` - [set the height](slug:common-features/dimensions) in the nested **popup settings** tag of the component. It must **not** be a `null/empty` string.
-* `ItemHeight` - `decimal` - set it to the height each individual item will have in the dropdown. Make sure to accommodate the content your items will have and any item template.
+* `ItemHeight` - `decimal` - set it to the height each individual item will have in the dropdown. Make sure to accommodate the content your items will have and any item template. [Disable text wrapping](slug:dropdowns-kb-disable-long-text-wrap) if the items have long text, which wraps and overlaps. Another option is to increase the component `Width` or just the dropdown `Width` in the nested `<ComponentName>PopupSettings` tag.
 * `PageSize` - `int` - defines how many items will actually be rendered and reused. The value determines how many items are loaded on each scroll. The number of items must be large enough according to the `ItemHeight` and popup `Height`, so that there are more items than the dropdown so there is a scrollbar.
 
 You can find a basic example in the [Local Data](#local-data-example) section below.

knowledge-base/dropdowns-disable-long-text-wrap.md

@@ -0,0 +1,113 @@
+---
+title: DropDown Items Wrap or Overlap
+description: Learn how to resolve and prevent text wrapping of long items in Telerik Blazor dropdown components, such as AutoComplete, ComboBox, DropDownList, and MultiSelect.
+type: troubleshooting
+page_title: How to Prevent Dropdown Item Text Wrapping
+slug: dropdowns-kb-disable-long-text-wrap
+tags: blazor, autocomplete, combobox, dropdownlist, multiselect, css, styling
+ticketid: 1663555, 1668373, 1679799, 1682531
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>
+                AutoComplete for Blazor, <br />
+                ComboBox for Blazor, <br />
+                DropDownList for Blazor, <br />
+                MultiSelect for Blazor
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB article deals with the following scenarios:
+
+1. The items in a Telerik dropdown component are long and wrap to multiple lines. The items become very high. How to avoid and disable this behavior?
+1. A Telerik dropdown component is using virtualization with `ItemHeight`. Long items wrap and overlap. How to fix this UI issue?
+
+## Cause
+
+By default, the dropdown items are as wide as the dropdown. Text wrapping of longer items is expected.
+
+## Solution
+
+1. Set a custom class in the component's `PopupSettings`.
+1. Apply a `white-space: nowrap;` style to the custom class.
+1. If a `PopupSettings` tag was not present until this point, also set a `Height`, otherwise it will change from `"200px"` to `"auto"`.
+
+>caption Disable text wrapping and overlapping of long dropdown items
+
+````RAZOR
+<TelerikDropDownList Data="@ListItems"
+                     @bind-Value="@SelectedValue"
+                     TextField="@nameof(ListItem.Text)"
+                     ValueField="@nameof(ListItem.Id)"
+                     Width="160px">
+    <DropDownListSettings>
+        <DropDownButtonPopupSettings Class="no-wrap" Height="200px" />
+    </DropDownListSettings>
+</TelerikDropDownList>
+
+<TelerikComboBox Data="@ListItems"
+                 @bind-Value="@SelectedValue"
+                 TextField="@nameof(ListItem.Text)"
+                 ValueField="@nameof(ListItem.Id)"
+                 ScrollMode="@DropDownScrollMode.Virtual"
+                 ItemHeight="30"
+                 PageSize="12"
+                 Filterable="true"
+                 FilterOperator="@StringFilterOperator.Contains"
+                 Width="160px">
+    <ComboBoxSettings>
+        <ComboBoxPopupSettings Class="no-wrap" Height="200px" />
+    </ComboBoxSettings>
+</TelerikComboBox>
+
+<style>
+    .no-wrap {
+        white-space: nowrap;
+    }
+</style>
+
+@code {
+    private List<ListItem> ListItems { get; set; } = new();
+
+    private int SelectedValue { get; set; } = 3;
+
+    protected override void OnInitialized()
+    {
+        ListItems = new List<ListItem>();
+
+        for (int i = 1; i <= 64; i++)
+        {
+            ListItems.Add(new ListItem()
+            {
+                Id = i,
+                Text = $"{i} Item with a lot of text that may wrap {i}"
+            });
+        }
+
+        base.OnInitialized();
+    }
+
+    public class ListItem
+    {
+        public int Id { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+}
+````
+
+## See Also
+
+* [AutoComplete Popup Setttings](slug:autocomplete-overview#popup-settings)
+* [ComboBox Popup Setttings](slug:components/combobox/overview#popup-settings)
+* [DropDownList Popup Setttings](slug:components/dropdownlist/overview#popup-settings)
+* [DropDownList Popup Setttings](slug:multiselect-overview#popup-settings)