php - jQuery 或 css 处理选择元素中的长描述

Question

我在最新项目中处理选择元素时遇到问题。问题是 select 元素内的描述太长导致布局中断。我有一个解决方案来为css中的选择和选项设置固定宽度，如下所示：

select, option {
   width:500px;
}

用户单击选择元素时的问题，选项恢复正常宽度，而不是我在 css 文件中设置的宽度。

打印我的系统的屏幕图像：

在 jsFiddle 上演示！

Answer 1

你可以试试

select{
    width:500px;
}
select, option {
    max-width: 500px;
}

select, option:hover {
   max-width:600px;
}

select, option:active {
   max-width:600px;
}

如果我正确理解你的问题可能会有所帮助

Answer 2

选择选项很疯狂......几乎不可能控制选项宽度。你甚至不能申请text-overflow:ellipsis。您拥有的某些选项值非常长。尝试将您的文本修剪为一些字符并填充到您的下拉列表中，使用一些工具提示插件提供带有全文的标题，例如bootstrap将标题强调为弹出窗口的插件。或者尝试使用一些 jquery 下拉插件，如下所示。

http://harvesthq.github.com/chosen/ http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/index.html