在选择框

Question

在图片中，选项的宽度大于选择框。我想将这些选项的宽度设置为与选择框和＆amp;对于那些较大的选项，将文本溢出设置为省略号。任何帮助将不胜感激。

以下是我的尝试：

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-space: nowrap;
    text-overflow: ellipsis;
}

小提琴：https://jsfiddle.net/3bsbcqfz/

Answer 1

我试图从css中找到解决方案。但我没能做到。没关系，我已经为它写了一个简单的javascript代码。这可以为它做点什么。

innerHTML

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

Answer 2

您可以使用javascript来减小选项文本的长度，以使其与选项的长度匹配。我发现仅使用CSS没有解决方案

var e=document.querySelectorAll('option')
e.forEach(x=>{
if(x.textContent.length>20)
x.textContent=x.textContent.substring(0,20)+'...';
})

select
{
width:160px;
}

<select>
<option>fwefwefwefwe</option>
<option>fwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwefwe</option>
</select>

Answer 3

最后，我通过使用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 4

另一个简单的jquery解决方案是手动重写选项的长度，以获取所需的大小，如下所示：

$('option').each(function() {
  var optionText = this.text;
  var newOption = optionText.substring(0, 36);
  $(this).text(newOption + '...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<select style="width:250px">
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>