Hay algunos valores en el menú desplegable que tienen una longitud de texto más grande. selectize.js cambia automáticamente la altura del menú desplegable en ese caso y ajusta el texto, lo que hace que la altura del menú desplegable no sea fija. Quiero truncar la longitud del texto si se desborda el ancho del menú desplegable.

Actualmente se ve así (la altura del menú desplegable se expande automáticamente en este caso)

Deseado

HTML

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <select multiple class="form-control select-key" id="sel2" name="key-list[]"> <option>SBI Cap</option> <option>PGIM MidCap</option> <option>Axis SmallCap</option> <option>Kotak Technology</option> <option>SBI Technology Value Retirement Direct Fund</option> </select>

JS

 $(function () { $("#sel2").selectize({ onDropdownOpen: function($dropdown) { if (!this.lastQuery.length) { this.close(); this.settings.openOnFocus = false; } }, onItemAdd: function() { this.close(); }, onType : function (str) { if (str === "") { this.close(); } } }); });

CSS

 .form-control { width: 300px !important; } .selectize-dropdown { width: auto !important; } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { white-space: nowrap; }