JQuery 不错-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" 第二个选项时， select 编辑的文本会溢出下拉列表。我们如何解决这个问题？我尝试了所有解决方案，如 text-overflow、word-wrap 并尝试修复父容器的宽度，但似乎没有任何效果。

Answer 1

创建跨度块，并隐藏溢出：

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

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

JQuery Nice-Select's selected text overflowing out of the dropdown when width is fixed or 100%

html

javascript

css

jquery

html-select