HTML选择下拉菜单关闭屏幕

问题描述 投票:6回答:3

考虑以下代码:

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

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

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

html css cross-browser
3个回答
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以获得更好的解决方案。


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

0
投票

看看这个答案

Are Multi-line Options in Html Select Tags Possible?

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

热门问题
推荐问题
最新问题