考虑以下代码:
<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>
打开右侧选择框时,下拉列表的内容将从屏幕上消失。此外,当列表更长时,您将无法滚动列表(仅使用鼠标滚轮和键盘,但滚动条不可见)
有解决方法吗?当然,您可以在选项上设置宽度/最大宽度,但这会切断选项元素的内容。有什么建议吗?
答案 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)