HTML选择下拉菜单关闭屏幕

时间:2011-06-09 10:44:30

标签: html css cross-browser

考虑以下代码:

<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>

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

有解决方法吗?当然,您可以在选项上设置宽度/最大宽度,但这会切断选项元素的内容。有什么建议吗?

3 个答案:

答案 0 :(得分:4)

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

除了更改为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以获得更好的解决方案,这取决于我当时的需求。

答案 1 :(得分:3)

我最近遇到过这个问题(使用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());
    });

答案 2 :(得分:0)

查看此答案

Are Multi-line Options in Html Select Tags Possible?

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