Wrap RadListBoxItem text on a new line

Environment

Product Version	2019.3.917
Product	RadListBox for ASP.NET AJAX

Description

By design when the RenderMode is set to "Lightweight", a horizontal scrollbar will appear when the text of the RadListBox item exceeds the control's width scrollbar appears the available width of the control. This article explains how to wrap the long text on a new line.

Solution for RenderMode="Lightweight":

All you have to do is to apply the following style to the page:

<style>
    .RadListBox .rlbItem{
      white-space:normal
    }
</style>
<telerik:RadListBox runat="server" Width="300px" ID="RadListBox1" RenderMode="Lightweight">
    <Items>
        <telerik:RadListBoxItem Text="Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1" />
        <telerik:RadListBoxItem Text="Item 2" />
        <telerik:RadListBoxItem Text="Item 3" />
        <telerik:RadListBoxItem Text="Item 4" />
    </Items>
</telerik:RadListBox>

Solution for RenderMode="Classic":

The default behavior of the control in this mode is to wrap the long text. If you however prefer the opposite, check out this article.