There are some values in the dropdown which has bigger text length. selectize.js automatically changes height of the dropdown in that case and wrap text which makes dropdown height not fixed. I want to truncate text length if it overflows width of dropdown.

Currently it looks like this (height of the dropdown automatically expands in this case)

Desired

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;
}