当下拉菜单面对如此宽的文本以至于无法扩展菜单的宽度时，我有哪些选项？即它会打破页面布局，或者如果调整下拉列表以适应长项目，则看起来太丑陋了。
截断？ 截断加上完整的悬停文字？ 不要让物品长？
有人遇到任何优雅的解决方案吗？
感谢。
答案 0 :(得分：7)
我意识到这个问题已经相当晚了，但我一直在寻找答案，我可能已经找到了一个相当优雅的解决方案。
看看这里：
第一个链接在推荐基于第二个链接的解决方案之前讨论了几个解决方案。
我们的想法是，点击后，您可以更改<select>标记的宽度，使其大到足以显示选项的全文。通过将<select>标记保留在溢出设置为“隐藏”的div中，它不会与页面的其余部分混在一起。
尝试一下 - 这是一个非常好的解决方案。
答案 1 :(得分：3)
使用工具提示截断将是我的选择......
我最后一次必须这样做时，我使用了一个非常丰富的UI控件。
答案 2 :(得分：2)
使用CSS property max-width为元素指定最大宽度。
答案 3 :(得分：1)
大多数浏览器都会以全宽显示选项，而不管下拉列表的实际宽度如何，而IE会将它们裁剪为选择框的宽度。所以问题实际上是浏览器特定的。
我已经在下拉列表中使用绝对定位做出了一个解决方案，这样我就可以在IE中悬停它的宽度，而不会破坏我的布局。有点hacky，但这是一个选择。
答案 4 :(得分：1)
我同意GordonB关于截断选项的看法。过长的选项可能难以阅读，正如您所提到的那样看起来很糟糕。
但是，如果您的下拉列表是从用户输入填充的，那么我会限制长度。用15个单词可以说是5个......如果不能，那么下拉可能不是你最好的选择。
例如，如果您的选项是研究论文及其作者的标题，您可以将它们缩写为几个关键词（“String Theory and You [Brown 2008]”）。另一方面，如果选项本身只有几个字的区别，并且如果它们被截断则会失去意义（例如“花生酱和葡萄果冻三明治配胡萝卜条和豆浆”和“花生酱和波森莓果冻”等选项列表带有胡萝卜条和2％牛奶的沙子“）也许你可以通过顺序显示所有选项来提供更好的服务，并附带一个复选框或单选按钮。
（如果您使用的是ASP.NET，基本上我说的是使用转发器而不是DropDownList）
第二种方法还可能允许您合并您在下拉列表中无法使用的其他元素。看看this Amazon search result page的想法。
答案 5 :(得分：0)
我一直在使用使用＆lt; div＆gt;实现的商业ASP.NET控件。而不是＆lt; select＆gt;。通过这种方式，我们可以在其上放置多行元素，根据需要设置样式并执行其他操作。
答案 6 :(得分：0)
取决于你说话的范围，背景是什么。通常这归结为设计问题而不是编码问题。如果文本很长，则会出现可用性问题，因为在下拉列表中阅读长文本很困难。我的选择是：
如果下拉列表非常窄并且最长的项目不是很长（例如3-4个字），请更改设计以适应它。
如果文字很长（例如句子），那么如果可以的话就截断它。有时文本不适用于此（例如，您最终可能会使用相同文本的多个项目）。您无法在选择列表项上放置工具提示。
如果文本很长且无法截断，您可能需要考虑不同的UI选项。
答案 7 :(得分：0)
为什么不创建基于冗长字段的计算字段。 只创建它只是前50个（比方说）字符。
= LEFT（[标题]，50）
然后在下拉列表中引用该字段。