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

Stack Overflow Asked by Aishwarya Shiva on December 11, 2021

$('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>

When you select the second option with value="1" the selected text overflows out of the dropdown. How can we fix this? I tried all the solutions like text-overflow, word-wrap and tried fixing the widths of parent containers but nothing seem to work.

css html html select javascript jquery

One Answer

Make the span block, and hide the overflow:

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

Answered by CBroe on December 11, 2021

Add your own answers!

Ask a Question

Get help from others!