有没有办法阻止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 属性中,以便用户可以在鼠标悬停时看到它,我会看看我的客户是否将接受该解决方案。感谢大家的意见,我会在今天和明天关注这个问题,以获得任何其他答案或建议。
最佳答案
不要认为使用纯 CSS 是可能的。
另请参阅此处关于 SO 的帖子:Limit Initial width of select list
从这个问题看来,您有两个选择。
- 正如您自己发现的那样,您可以“截断”字符串的末尾。
- 使用 javascript 强制它的宽度。
关于html - 防止 HTML Select Dropdown 扩展到最长的字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8246308/