HTML选择下拉菜单超出屏幕

Question

考虑以下代码:

<div style="float: left;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div style="float: right;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

打开右侧选择框时，下拉菜单的内容会超出屏幕。当列表更长时，您将无法滚动列表（仅限使用鼠标滚轮和键盘，但滚动条不可见）。是否有解决方法？当然，您可以在选项上设置宽度/最大宽度，但这将截断选项元素的内容。有没有建议？

- Geert

---

一张截图会很有帮助。 - Ham Vocke

将此代码设置在本地，我真的不知道问题出在哪里。在Firefox和Safari中，您会得到一些非常长的菜单..这就是您所说的“掉出屏幕”的意思吗？ - Nils Munch

http://jsfiddle.net/aQYnF/ 在FF4中，第一个选项超出了屏幕。 - VAShhh

“fall off the screen” 是一个荷兰格言，不应该翻译成英语...对不起 :) 这个 jsfiddle 的例子正是我所指的，第一个选项只能部分显示。 - Geert

Answer 1

我认为您的意思是选择框的右侧不可见，因此用户无法使用滚动条。

除了更改为JavaScript解决方案之外，我可以看到两个潜在的选项。第一个是重新定位元素以允许更长的内容。

第二个是将元素的宽度指定为百分比值，如下所示，缺点是选择元素的宽度将被动态更改，您将失去一些设计控制。

<div style="float: right;">
  <select style="width:100%">
    <option width="">asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

我在Chrome和Firefox中进行了快速测试，您可以使用任何百分比值，我测试了100％和50％，在50％的情况下-根据内容的性质或任何占位符值（例如“--SELECT--”），该元素将仅显示最长项目的一半长度。

根据我的需求，我可能会查找jQuery插件或其他JavaScript来获得更好的解决方案。

- Ryan

---

谢谢，我已经担心不得不使用JavaScript来解决这个问题了。在我的UI中，重新定位或放大选择框不是一个选项。 - Geert

Answer 2

我最近遇到了这个问题（使用Firefox） - 打开的选择菜单会超出桌面屏幕的边界。

我的解决方案是将选项内容复制到标题属性中。并且在更改时更新选择标题，因此悬停在选项或选择上将在浏览器窗口内显示工具提示 - 演示。

var $select = $('select');

$select
    .on('change', function () {
        var $this = $(this),
            // use replace to remove extra white (if desired)
            txt = $this.find('option:selected').text().replace(/\s+/g, ' ');
        // add title to select
        $this.attr('title', txt);
    })
    .change()
    .find('option').each(function () {
        var $this = $(this);
        // add title to each option, so it works on hover
        $this.attr('title', $this.text());
    });

- Mottie

---

这是个好主意。虽然它并没有解决选项超出屏幕而导致垂直滚动条无法访问的问题。这种弹出式菜单不应该在屏幕边缘裁剪自己，所以这可能是操作系统或浏览器中的一个错误。系统级别的上下文菜单（例如下拉选择菜单）应该自动重新定位和调整大小以保持在显示范围内。它在某些情况下肯定会重新定位，但大小不正确。 - Triynko

Answer 3

看看这个答案

HTML选择标签中是否可能有多行选项？

使用纯HTML和select，不可能自动换行选项内容以显示多行（以免超出屏幕）。

- VAShhh