By default, the selector list shown for a <select></select>
element will be as wide as the widest <option></option>
child it contains. If I hardcode the width of the select tag with CSS to make it more narrow, the widest option is truncated in the display.
I want to trim down the option text to fit the selection list, appending ... (ellipsis) to show that it's truncated when the option is selected, however, when I expand the dropdown I want the text in the dropdown to be full width, without trailing ellipsis.
How would I accomplish that?