Set Width at Option of Select Box

Question

In the picture, the width of option is larger than the select box. I want to set width of those options as same as select box & for those larger options set 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; } 

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

Answer 1

I tried to find a solution from CSS. But I failed to do it. Doesn't matter, I have written a simple javascript code for it. This is can do it something for it.

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

You can use javascript to make the length of the option text to be less so as that it matches the length of the option. I found no solution for only using 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>