对于太宽的下拉菜单项的建议？

Question

当下拉菜单面对如此宽的文本以扩展菜单的宽度以适应时,我有哪些选项是不可行的？即它会打破页面布局,或者如果调整下拉列表以适应长项目,则看起来太丑陋了.

截断？截断加上完整的悬停文字？不要让物品长吗？

有人遇到任何优雅的解决方案吗？

谢谢.

Answer 1

我意识到这个问题已经相当晚了,但我一直在寻找答案,我可能已经找到了一个相当优雅的解决方案.

看看这里:

• http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
• http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

第一个链接在推荐基于第二个链接的解决方案之前讨论了几个解决方案.

我们的想法是,在点击时,您可以更改<select>标记的宽度,使其足以显示选项的全文.通过将<select>标签保持在溢出设置为"隐藏"的div内,它不会与页面的其余部分混在一起.

尝试一下 - 这是一个非常好的解决方案.

Answer 2

我同意 GordonB 关于截断选项的观点。太长的选项可能很难阅读，正如你提到的，它看起来很糟糕。

但是，如果您的下拉列表是根据用户输入填充的，我会限制长度。可以用 15 个词表达的内容应该用 5 个词表达……如果不能，那么下拉菜单可能不是您的最佳选择。

例如，如果您的选项是研究论文的标题及其作者，您可以将它们缩写为几个关键词（“弦理论和您 [Brown 2008]”）。另一方面，如果选项本身仅相差几个单词，并且在被截断后就失去了意义（例如“花生酱和葡萄果冻三明治配胡萝卜条和豆奶”和“花生酱和波森莓果冻”等选项列表）夹有胡萝卜条和 2% 牛奶的三明治”）也许按顺序显示所有选项并酌情附上复选框或单选按钮会更好。

（如果您使用 ASP.NET，基本上我是说使用转发器而不是 DropDownList）

第二种方法还可能允许您合并无法合并到下拉列表中的其他元素。查看亚马逊搜索结果页面以获取想法。