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>

打开右侧选择框时，下拉列表的内容将从屏幕上消失。此外，当列表更长时，您将无法滚动列表（仅使用鼠标滚轮和键盘，但滚动条不可见）

有没有解决这个问题？当然，您可以在选项上设置宽度/最大宽度，但这会切断选项元素的内容。有什么建议？

Answer 1

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

除了更改为JavaScript解决方案之外，您还可以看到2个可能的选项，第一个是重新分配元素以允许更长的内容。

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

<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插件或其他JavaScripts以获得更好的解决方案。

Answer 2

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

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

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());
    });

Answer 3

看看这个答案

Are Multi-line Options in Html Select Tags Possible?

使用纯HTML和选择，不可能在多行中自动包装选项的内容（因此它不会离开屏幕）