图中，选项的宽度大于选择框的宽度。我想将这些选项的宽度设置为与选择框相同，并且对于那些较大的选项，将文本溢出设置为省略号。任何帮助，将不胜感激。
这是我尝试过的：
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/
我试图通过CSS找到解决方案。但我没能做到。没关系；我已经为它编写了一个简单的 Javascript 代码。这可以为它做点什么。
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>