Hi,
I have legibly long text in a drop-down list on my asp.net page. it violates the UI boundary and goes beyond the allocated region of UI.
Is there anyway I can wrap [not trim] it using CSS or javascript ? I must display the entire string, no matter how long it is.
Short answer: No.
Longer answer: User a radio group instead of a select menu. You could use the CSS overflow property to add scrolling.
Longer answer: yes.
You can use not default element, but make your own with JavaScript and CSS. Your custom droplist element should contain few divs (or other HTML elements) as droplist items. When you'll set fixed width to droplist's cell, text will wrap inside.
One example is here (just picked up the 1st link from query in google: "JavaScript dropdown").
If you wanted to keep the UI representation of a native select box, there is a (rather nasty) way you could do it. It's rather manual, and I wouldn't really recommend it in general, but it could achieve what you want:
For each option in the list calculate a "width" based on the characters in that option's text. This should be a vague representation of the proportional font character widths (eg. ijtl=1, aopg = 2, m = 2.5, roughly, that sort of thing).
Anything that goes over a certain value (estimate this based on your available UI space) gets split at an appropriate point (a space, or hyphenate a long word - need to write an algorithm to do this). Repeat until you have no chunks over the desired size. You should end up with an array per option (some will be only length 1, if already short enough).
For each option with a matching array longer than 1, insert option nodes just after the original containing each of the subsequent chunks of text. Give them a particular class (eg. long-child), and the same value as the original. You should probably also give some visual indicator that it's a continuation of the previous item.
Supply an onchange event handler for the select, which checks to see if the selected option has the long-child class. If so, it should search preceding options to find the first which has the same value and does not have the long-child class. Set the selectedIndex to that option instead.
Like I said, nasty, but could achieve the effect you want. It might even be less code than Pawka's suggestion of rolling your own ;)
I think it's time to think of a different interface piece, rather than complicate a simple drop down.
But if you must, I'd use some css/javascript to recreate the drop down widget using list elements.