阻止HTML选择下拉列表从扩展到最长字符串

Question

有没有办法阻止Select元素动态扩展到最长的字符串？我的问题是我有一个动态填充的下拉菜单，其固定宽度显示正常，但是当我展开下拉列表时，它会忽略我的固定宽度并扩展到具有最长值的选项元素，如下图所示。 / p>

我想要做的是设置要修复的宽度以防止出现上述情况，并将值字符串添加到每个选项元素标题属性，以便在鼠标悬停时显示更长的字符串。我尝试设置选项元素的宽度，但它在Chrome或IE7-9中不起作用。

我选择和选项元素的CSS和HTML如下：

#myDropDown
{
    margin: 0px 0px 0px 44px;
    font-size: Medium;
    width: 400px !important;
}

#myDropDown option
{
    width: 400px !important; 
}

<select id="myDropDown"></select>

更新：

认为溢出属性会这样做。尝试在select元素和CSS选项中设置它，但在Chrome或IE中都没有。

更新2：

好的，决定作弊并修剪长度大于某个固定长度的字符串并将整个字符串放在选项元素的title属性中，以便用户可以在鼠标悬停时看到它，我会看看我的客户端将接受该解决方案。感谢大家的意见，我今天和明天都会监控这个问题，以获得任何其他答案或建议。

Answer 1

不要认为可以使用纯CSS。

另见SO上的这篇文章：Limit Initial width of select list

从这个问题来看，你看起来有两种选择。

1. 因为你已经发现自己可以“截断”＆＃39;字符串的结尾。
2. 使用javascript将其强制为宽度。

Answer 2

尝试为选项设置宽度：

select{
    width:150px;
}
select option{
    width:120px;
    overflow:hidden;
}


<select>
<option>Lorem ipsum dolor</option>
<option>sit amet, consectetur adipiscing elit. Maecenas eu diam risus, </option>
<select>