CSS-Textüberlauf: Ellipse; funktioniert in Firefox, funktioniert aber nicht in der Dropdown-Liste in Google Chrome und Opera Browsern?

Question

Ich möchte die Länge des Textes in Optionen einer Dropdown-Liste beschränken und dafür ist der HTML- und CSS-Stil wie folgt. Es funktioniert einwandfrei im Firefox-Browser, funktioniert aber nicht in Google Chrome und Opera Browsers.

<div class="select"> 
<select name="option[1381]" id="input-option1381" class="form-control "> 
    <option value=""> --- Please Select --- </option> 
    <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip (+$1.50)</option> 
    <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option> 
</select> 
</div> 

<style type="text/css"> 
.select select { 
    overflow: hidden; 
    position: relative; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
</style> 

Was könnte der Grund sein? Ich habe keine Ahnung, warum es nicht in Oper und Chrom funktioniert. Bitte helfen Sie.

Answer 1

Sie können (verlässlich) keinen Textüberlauf anwenden: Ellipse; zu <select> Elemente oder ihre <option> s. Also hatte ich das Problem gelöst, indem ich ein paar zusätzliche Padding-Rechte hinzugefügt habe. Auf diese Weise hat der Text keine Möglichkeit, in den Pfeil zu laufen, da er nicht in den gepolsterten Bereich gelangen kann. Problem gelöst !

<div class="select"> 
<select name="option[1381]" id="input-option1381" class="form-control "> 
    <option value=""> --- Please Select --- </option> 
    <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip (+$1.50)</option> 
    <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option> 
</select> 
</div> 

<style type="text/css"> 
.select select { 
    padding-right:35px; 
} 
</style>