セレクトボックスのオプションで幅を設定する

Question

画像では、オプションの幅が選択ボックスよりも大きくなります。これらのオプションの幅を選択ボックス&と同じにするには、より大きいオプションの場合は省略記号としてテキストオーバーフローを設定します。どんな助けもありがとう。ここで

は、私が試したものです：

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

フィドル：https://jsfiddle.net/3bsbcqfz/

Answer 1

、私はここでul, li.を使用してカスタムドロップダウンを作成することで、解決策を考え出すのソリューションです：

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

私は、CSSの解決策を見つけることを試みました。しかし、私はそれをしなかった。問題ではない、私はそれのためのシンプルなJavaScriptコードを書いている。これはそれのために何かできることです。最後に

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>