In this article I will explain how to handle the problem where long text of items (options) getting cut (stripped) when we set width for ASP.Net DropDownList control and HTML SELECT DropDownList.
Whenever we specify width of ASP.Net DropDownList control or HTML SELECT and if the text length of any ASP.Net DropDownList Item or HTML SELECT option exceeds the width, browser trims the extra characters which makes it difficult to read the complete text.
 
 
Solution
The solution is to auto adjust the width of ASP.Net DropDownList control or HTML SELECT on MouseOver in such a way that the width of the ASP.Net DropDownList control or HTML SELECT can be adjusted to the width of the item (option) with longest text.
And when the focus is moved to some other control the ASP.Net DropDownList control or HTML SELECT will again shrink back to its original width.
To achieve the same I will be making use of jQuery.
 
 
The jQuery Function to handle long text in ASP.Net DropDownList control and HTML SELECT DropDownList
Inside the document ready event handler, first a loop is executed over all DropDownLists having Css class adjust-width and the width of the DropDownList is set in the rel attribute.
Then two event handlers i.e. mouseover and blur are assigned to the all the DropDownLists having Css class adjust-width.
Inside the mouseover event handler, a loop is executed over all the items (options) of the DropDownList and the longest text is fetched.
Now in order to determine the width of the longest text, an HTML SPAN element is created with the text and its width is calculated.
Finally the DropDownList width is set to the sum of width of the HTML SPAN and the width of the DropDownList down arrow button.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //Set the original width in rel attribute.
        $(".adjust-width").each(function () {
            $(this).attr("rel", $(this).width())
        });
 
        //On mouse over adjust the width of DropDownList.
        $(".adjust-width").mouseover(function () {
            var ddl = $(this);
            var maxOption = "";
            var maxWidth = 0;
 
            //Loop and find the Option with biggest text.
            ddl.find("option").each(function (i) {
                if ($(this).text().length > maxWidth) {
                    maxOption = $(this).text();
                    maxWidth = $(this).text().length;
                }
            });
 
            //Determine the width of the Option text.
            var span = $("<span />").html(maxOption);
            $("body").append(span);
            var width = span.width();
            span.remove();
 
            //Width of the DropDownList down arrow button.
            var dropDownButtonWidth = 20;
 
            //Set the adjusted width to the DropDownList.
            ddl.css("width", width + dropDownButtonWidth);
        });
 
        //On focus out set the original width of DropDownList.
        $(".adjust-width").blur(function () {
            $(this).css("width", $(this).attr("rel"));
        });
    });
</script>
 
 
Handling long text in ASP.Net DropDownList control
Apply the Css Class adjust-width to all ASP.Net DropDownLists for which you want handle long text as shown below.
<asp:DropDownList ID="DropDownList1" runat="server" Width="75px" CssClass="adjust-width">
    <asp:ListItem Text="Mumbai" Value="1"></asp:ListItem>
    <asp:ListItem Text="Delhi" Value="2"></asp:ListItem>
    <asp:ListItem Text="Chandigarh City" Value="3"></asp:ListItem>
</asp:DropDownList>
 
 
Handling long text in HTML SELECT DropDownList
Apply the Css Class adjust-width to all HTML SELECT DropDownLists for which you want handle long text as shown below.
<select id="Select1" style="width: 75px;" class="adjust-width">
    <option value="1">Mumbai</option>
    <option value="2">Delhi</option>
    <option value="3">Chandigarh City</option>
</select>
 
 
Screenshot
Handle long text in ASP.Net DropDownList control and HTML SELECT DropDownList
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code