Par défaut, et en absence d'indication contraire, la largeur d'un <select> s'adapte à la largeur du contenu des <option> qui le composent.
Lorsque l'on a défini une largeur à un <select>, pour des raisons de design par exemple, il peut arriver que la liste apparaissant déborde lorsque celle-ci comporte des <option> au libellé long, ce débordement n'est pas toujours désirable.
Dans ce cas on ce dit qu'il suffit d'utiliser la déclaration text-overflow:ellipsis pour régler le soucis.
Malheureusement cela ne s'applique pas conformément à notre attente.
L'implémentation et le rendu des éléments de contrôle est différent suivant les navigateurs, le support et l'environnement, aussi ce qui suit n'est valable que pour les navigateurs en version Destock.
Rendu standard
On constate que pour un <select>, standard, malgré la déclaration text-overflow:ellipsis, la liste déborde à droite. Le CSS n'est donc pas pris en compte.
Rendu avec attribut size
Le CSS est bien pris en compte avec le même <select> possédant un attribut size.
Rendu avec ellipsisSelect
Appliquer au <select> la fonction
Restaurer le <select>
Fonction ellipsisSelect
et la fonction de « reset » au cas où :
Observations
La première chose à faire est de choisir des libellés explicites et concis pour les <option>, c'est toujours bien de le rappeler.
Si cela ne vous convient toujours pas, vous pouvez avoir recours à la réalisation de <select> customisé comme par exemple : UL like Select.