Set width of dropdown element in HTML select dropdown options

I am working on a website that involves automatically populating a select box using a PHP script. This all works fine except the problem is that what I am using to populate the text box have very long titles (they are journal articles and presentation titles). The dropdown box extends to the width of the longest element, which stretches off the edge of the screen, therefore making the scrollbar impossible to reach. I have tried various methods of trying to manually set the dropdown box using CSS to a particular width, but so far to no avail. The best I have accomplished it to set the Select box to a certain width but the dropdown menu itself is much, much wider.

Any tips on this would be greatly appreciated.

EDIT:

It turns out that the following CSS line works in all of the primary browsers except for Google Chrome (which is what I was testing the page in). If a solution for Chrome is known, that would be good to know about.

select, option { width: __; }

From stackoverflow

• You can style (albeit with some constraints) the actual items themselves with the option selector:

  select, option { width: __; }
  

  This way you are not only constraining the drop-down, but also all of its elements.

  Greg Zwaagstra : This is what I had already tried but I originally had only tested it on Chrome. Turns out this works on Internet Explorer, Firefox, Safari, and Opera. So I'll say this answers the question since the primary user of this particular page (as it is part of the administrative part of the site), does not use Google Chrome. If there was a known way to get past this in Google Chrome, that would be good to hear (also, it would be nice if all browsers handled CSS the same way. I thought this would be more standardized by now).

  Greg Zwaagstra : Also, thanks for the ridonkulously speedy reply!

  anddoutoi : Be aware that setting a set width of the select-element is not the best of ideas, see: http://stackoverflow.com/questions/1700807/how-to-show-extended-option-in-select-list

  Greg Zwaagstra : That is weird... but this bug will not be a problem in my case as the user only needs to see the beginning part of the title so he knows exactly which entry on his publications page he is selecting to edit or delete.

• On the server-side:

  1. Define a max length of the string
  2. Clip the string
  3. (optional) append horizontal ellipsis

  Alternative solution: the select element is in your case (only guessing) a single-choice form control and you could use a group of radio buttons instead. These you could then style with better control. If you have a select[@multiple] you could do the same with a group of checkboxes instead as they can both be seen as a multiple-choice form control.

  Greg Zwaagstra : Thanks for the answer. Your first solution is what I was thinking would need to be done but was hoping there would be an easier way. Turns out there is so long as one ignores Chrome.