how to handle long text in dropdownlist control in ASP.NET [duplicate]

问题

Possible Duplicate:
Recommendations for dropdown menu items that are too wide?

I have a drop down list which is populated by the database. Its value field contains the record's id, and its option field contains record's text. But the record's text entries are very long and make the drop down so wide that it totally changes the appearance of my webpage. When I cut down the width it also cuts down the text displayed. Is there any way I can make the web page look good and still allow the user to see the full text (like wrapping, scrolling, or something like that)?

How can I handle this?

回答1:

Try using CSS to add a fixed width to your dropdown, like:

select {width: 150px}

Whilst the dropdown itself will be of a fixed width and may not show all of the text, the option elements should expand to the width of the widest element.

May not work in IE7 and below, in which case the this link may be of some use for those browsers:

回答2:

You might consider setting a fixed width then setting the title attribute to provide a tooltip type of functionality so that the text shows up when hovered over.

After binding / populating the dropdownlist you can set the title attribute on each item to its own text:

foreach (ListItem li in ddl.Items)
{
    li.Attributes.Add("title", li.Text);
}

回答3:

If the text is very wrong, I think you may have to consider a different approach rather than just displaying it all in a DropDownList.

You could have the DropDownList only display a small part of the text as a summary and then display the full text next to the list as the user changes the item. I would recommend this is done using AJAX to keep the user experience nice.

To do this, wrap the DropDownList and a Label to the right of the list in an UpdatePanel. Then, the onSelectedIndexChanged event of the DropDownList would look something like this:

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
   var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
   Label1.Text = item.Text;
}

回答4:

One pleasant alternative is to show only part of the text in your column, plus a button or graphic of some sort that indicates they can see more by either hovering over the cell or clicking on something.

For example:

Name | Id   | Cover Letter
----- ------ ----------------------------------------------------
Rex  | 1000 | I am seeking opportunities in t... (click for more)

You can code this by hand, but there are a lot of tools out there that make this easy, particularly if you're comfortable with JQuery. I found the following just quickly browsing the JQuery windows and overlays plugins:

JQuery Callout Plugin, which looks very nice.
JHelperTip, "The multi-use tooltip for JQuery."
Coda Bubble for a slick, cute style.

回答5:

Have you considered showing initial few characters and then using a tool tip to show the complete string when the item is selected?

回答6:

I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

It's a jquery plugin to make a styleable unordered list backed by the hidden select element.

The source is on github: https://github.com/tncbbthositg/GiantDropdown

来源：https://stackoverflow.com/questions/1116395/how-to-handle-long-text-in-dropdownlist-control-in-asp-net

标签

ASP.NET

drop-down-menu

word-wrap