html - 防止 HTML Select Dropdown 扩展到最长的字符串

Question

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

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

我的 select 和 option 元素的 CSS 和 HTML 如下:

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

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

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

更新:

以为 overflow 属性可以做到。尝试在选择元素和选项 CSS 中设置它，但在 Chrome 或 IE 中都不起作用。

更新 2:

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

Answer 1

不要认为使用纯 CSS 是可能的。

另请参阅此处关于 SO 的帖子:Limit Initial width of select list

从这个问题看来，您有两个选择。

1. 正如您自己发现的那样，您可以“截断”字符串的末尾。
2. 使用 javascript 强制它的宽度。