JQuery Nice-Select 的选定文本在宽度固定或 100% 时溢出下拉列表

Question

 $('select').niceSelect();

 span.current { text-overflow: ellipsis; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css" rel="stylesheet"/> <select class='wide'> <option data-display="Select">Nothing</option> <option value="1">Some lonnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg option</option> <option value="2">Another option</option> <option value="3" disabled>A disabled option</option> <option value="4">Potato</option> </select>

当您 select 第二个选项value="1"时，所选文本溢出下拉菜单。 我们如何解决这个问题？ 我尝试了所有解决方案，例如text-overflow 、 word-wrap并尝试修复父容器的宽度，但似乎没有任何效果。

Answer 1

制作 span 块，并隐藏溢出：

span.current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}