选择选项出现在窗口外[重复]答案

【问题标题】：Select options appear outside the window [duplicate]选择选项出现在窗口外[重复]
【发布时间】：2013-04-16 14:37:05
【问题描述】：

是否可以在窗口内隐藏选择选项？ IE、FF、Chrome 的行为方式相同

溢出：隐藏不起作用。

【问题讨论】：

好像fuuuuuuuuuuuuuu 更合适。
为什么这对您来说是个问题？当您可能有足够的空间在浏览器窗口之外显示它时，限制弹出窗口的大小是违反直觉的。
事实上我喜欢浏览器处理这个问题的方式。但是几天前我遇到了我们的 QA 不喜欢的问题:)

标签： html css

【解决方案1】：

我认为您对此无能为力。

或者，您可以根据最长的选项增加下拉菜单的宽度

或者您可以剪切最长选项的文本，使其变小。

类似

$('select option').each(function(a,b){
    if(b.value.length > 10){
      b.text= b.text.substring(0, 10)+ a+ '..';
    }
});

或者你可以创建自己的选择，使用divs :)

可能使用第三方stylish dropdowns。

看到这个fiddle，我用了一个丑陋的 5 分钟实现了这样一个下拉菜单即

创建这样的标记：

<ul class="parent">
    <li>---Select---</li>
</ul>
<ul class="option" >
    <li>this is a long option</li>
    <li>this is a even long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
</ul>

并通过 css 和 jquery 美化它

【讨论】：

为您的实现点赞:) 但问题仍然是如何修复默认选择。现在关于你的答案的第一部分......没办法，因为选择具有静态宽度和选项宽度将是相同的，即使剪辑文本
option width will be the same。为什么这样？请参阅@TarasTomishch，想法是仅剪切该数量的文本，这将使选项在选择的宽度限制内。
当窗口被缩放时，选择的一部分隐藏在其中。但是当你点击它时，选项会出现在全角之外（类似于选择一个）
这是某种错误，可能与操作系统本身有关。我在窗口外看到 Chrome 渲染的下拉列表，这很好，但它们延伸到桌面边缘并被桌面边缘剪裁，这根本不应该发生。它使垂直滚动条无法访问，因为它们不在屏幕上。

【解决方案2】：

我认为您不能使用 css 来防止它像那样超出浏览器窗口。（我不积极）。

但是，您可以使用 jquery ui autocomplete 或类似的东西将选择选项设置为 div，然后它将保留在窗口内。

【讨论】：