Set width when selecting a selection window

Question

In the figure, the width of the parameter is larger than the selection field. I want to set the width of these options in the same way as the selection field, and for larger options, set the text overflow as ellipsis. Any help would be appreciated.

Here is what I tried:

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

Violin : https://jsfiddle.net/3bsbcqfz/

Answer 1

I tried to find a solution from CSS. But I could not do it. It doesn't matter, I wrote simple code for JavaScript. It can do something for this.

 function shortString(selector) { const elements = document.querySelectorAll(selector); const tail = '...'; if (elements && elements.length) { for (const element of elements) { let text = element.innerText; if (element.hasAttribute('data-limit')) { if (text.length > element.dataset.limit) { element.innerText = '${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}'; } } else { throw Error('Cannot find attribute \'data-limit\''); } } } } window.onload = function() { shortString('.short'); }; 

 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> 

Answer 2

Finally, I came up with a solution by creating Custom Drop-down using ul, li. Here is the solution:

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 3

Another jquery simple solution is to manually rewrite the parameter length to get the desired size as follows:

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