Set Breite Option von Select Box

Question

Im Bild ist die Breite der Option größer als das Auswahlfeld. Ich möchte die Breite dieser Optionen genauso einstellen wie das Auswahlfeld & für diese größeren Optionen, die Text-Overflow als Ellipse setzen. Jede Hilfe wäre willkommen.

Hier ist, was ich versucht:

Html

<select> 
    <option>Select your University</option> 
    <option>Bangladesh University of Engineering and Technology</option> 
    <option>Mawlana Bhashani Science and Technology University</option> 
</select> 

Css

select, option { 
    width: 250px; 
} 

option { 
    overflow: hidden; 
    white-sapce: no-wrap; 
    text-overflow: ellipsis; 
} 

Fiddle: https://jsfiddle.net/3bsbcqfz/

Answer 1

Endlich, ich komme mit der Lösung nach oben durch die Schaffung Benutzerdefinierte Ausgliederungs mit ul, li. Hier ist die Lösung:

FIDDLE DEMO

HTML

<div class='custom-select'> 
    <div class="selected"> 
     <span class='text'>Select</span> 
    </div> 
    <div class='select-box'> 
     <ul class='select-list'> 
      <li data-row='0' data-value=''> 
       Select 
      </li> 
      <li data-row='1' data-value='BUET'> 
       Bangladesh University of Engineering and Technology 
      </li> 
      <li data-row='2' data-value='MBSTU'> 
       Mawlana Bhashani Science and Technology University 
      </li> 
     </ul> 
    </div> 
</div> 

CSS

div.custom-select 
{ 
    height: 40px; 
    width: 400px; 
    position: relative; 
    background-color: #F2F2F2; 
    border: 1px solid #E4E4E4; 
} 

div.selected 
{ 
    width: inherit; 
    cursor: pointer; 
    line-height: 20px; 
    display: inline-block; 
} 

div.selected > .text 
{ 
    padding: 10px; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

div.select-box 
{ 
    display: none; 
    width: 100%; 
    z-index: 10029; 
    position: absolute; 
    border-radius: 3px; 
    box-shadow: 0 8px 20px #000000; 
    box-shadow: 0 8px 20px rgba(0,0,0,.35) 
} 

div.select-box.active 
{ 
    display: block; 
} 

div.select-box.drop-up 
{ 
    top: auto; 
    bottom: 100%; 
} 

ul.select-list 
{ 
    margin: 0; 
    padding: 10px; 
    list-style-type: none; 
} 

ul.select-list li 
{ 
    cursor: pointer; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

ul.select-list li:hover, 
ul.select-list li.active 
{ 
    background-color: #999999; 
} 

JavaScript

$(document).ready(function(){ 
    $("div.selected").on("click", function() { 
     var hasActiveClass = $("div.select-box").hasClass("active"); 

     if (hasActiveClass === false) { 
      var windowHeight = $(window).outerHeight(); 
      var dropdownPosition = $(this).offset().top; 
      var dropdownHeight = 95; // dropdown height 

      if (dropdownPosition + dropdownHeight + 50 > windowHeight) { 
       $("div.select-box").addClass("drop-up"); 
      } 
      else { 
       $("div.select-box").removeClass("drop-up"); 
      } 

      var currentUniversity = $(this).find('text').text().trim(); 

      $.each($("ul.select-list li"), function() { 
       var university = $(this).text().trim(); 
       if (university === currentUniversity) 
        $(this).addClass("active"); 
       else 
        $(this).removeClass("active"); 
      }); 
     } 

     $("div.select-box").toggleClass("active"); 
    }); 

    $("ul.select-list li").on("click", function() { 
     var university = $(this).html(); 
     $("span.text").html(university); 
     $("div.select-box").removeClass("active"); 
    }); 

    $("ul.select-list li").hover(function() { 
     $("ul.select-list li").removeClass("active"); 
    }); 

    $(document).click(function (event) { 
     if ($(event.target).closest("div.custom-select").length < 1) { 
      $("div.select-box").removeClass("active"); 
     } 
    }); 

}); 

Answer 2

Ich versuchte Lösung von CSS zu finden. Aber ich habe es nicht geschafft. Egal, ich habe einen einfachen JavaScript-Code dafür geschrieben. Das kann etwas dafür tun.

function shortString() { 
 
    var shorts = document.querySelectorAll('.short'); 
 
    if (shorts) { 
 
    Array.prototype.forEach.call(shorts, function(ele) { 
 
     var str = ele.innerText, 
 
     indt = '...'; 
 

 
     if (ele.hasAttribute('data-limit')) { 
 
     if (str.length > ele.dataset.limit) { 
 
      var result = `${str.substring(0, ele.dataset.limit - indt.length).trim()}${indt}`; 
 
      ele.innerText = result; 
 
      str = null; 
 
      result = null; 
 
     } 
 
     } else { 
 
     throw Error('Cannot find attribute \'data-limit\''); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
window.onload = function() { 
 
    shortString(); 
 
};

select { 
 
    width: 250px; 
 
} 
 
option { 
 
    width: 250px; 
 
}

<select name="select" id="select"> 
 
    <option class='short' data-limit='37' value="Select your University">Select your University</option> 
 
    <option class='short' data-limit='37' value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option> 
 
    <option class='short' data-limit='37' value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option> 
 
</select>