Html 选择具有固定宽度的下拉菜单在 IE 中截断内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/682764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select dropdown with fixed width cutting off content in IE
提问by aaandre
The issue:
问题：
Some of the items in the select require more than the specified width of 145px in order to display fully.
选择中的某些项目需要超过 145px 的指定宽度才能完全显示。
Firefox behavior: clicking on the select reveals the dropdown elements list adjusted to the width of the longest element.
Firefox 行为：单击选择显示调整为最长元素宽度的下拉元素列表。
IE6 & IE7 behavior: clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements.
IE6 和 IE7 行为：单击选择会显示限制为 145px 宽度的下拉元素列表，从而无法读取较长的元素。
The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions.
当前的 UI 要求我们将此下拉菜单调整为 145 像素，并让它托管具有更长描述的项目。
Any advise on resolving the issue with IE?
关于解决IE问题的任何建议？
The top element should remain 145px wide even when the list is expanded.
即使展开列表，顶部元素也应保持 145px 宽。
Thank you!
谢谢！
The css:
css：
select.center_pull {
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
}
Here's the select input code (there's no definition for the backend_dropbox style at this time)
下面是select输入代码（目前还没有定义backend_dropbox样式）
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
Full html page in case you want to quickly test in a browser:
完整的 html 页面，以防您想在浏览器中快速测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>
<style type="text/css">
<!--
select.center_pull {
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
}
-->
</style>
</head>
<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
采纳答案by rusty
For IE 8 there is a simple pure css-based solution:
对于 IE 8，有一个简单的纯基于 css 的解决方案：
select:focus {
width: auto;
position: relative;
}
(You need to set the position property, if the selectbox is child of a container with fixed width.)
（如果选择框是具有固定宽度的容器的子级，则需要设置位置属性。）
Unfortunately IE 7 and less do not support the :focus selector.
不幸的是，IE 7 及更低版本不支持 :focus 选择器。
回答by Anoop Sharma
I did Google about this issue but didn't find any best solution ,So Created a solution that works fine in all browsers.
我在谷歌上搜索过这个问题，但没有找到任何最佳解决方案，所以创建了一个在所有浏览器中都能正常工作的解决方案。
just call badFixSelectBoxDataWidthIE() function on page load.
只需在页面加载时调用 badFixSelectBoxDataWidthIE() 函数。
function badFixSelectBoxDataWidthIE(){
if ($.browser.msie){
$('select').each(function(){
if($(this).attr('multiple')== false){
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).unbind('mousedown');
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
}
});
}
}
回答by islander
For a simple Javascript-free solution, adding a title-attribute to your <option>s holding the text might be enough, depending on your requirements.
对于简单的无 Javascript 解决方案，根据您的要求，向包含文本的 <option> s 添加标题属性可能就足够了。
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
This will show the cut-off text in a tool-tip fashion on hovering the <option>, regardless of the width of the <select>.
这将在悬停 <option> 时以工具提示方式显示截断文本，而不管 <select> 的宽度如何。
Works for IE7+.
适用于 IE7+。
回答by Zac
Here is a little script that should help you out:
这是一个小脚本，应该可以帮助您：
回答by stukerr
Not javascript free i'm afraid, but I managed to make it quite small using jQuery
恐怕不是免费的 javascript，但我设法使用 jQuery 让它变得非常小
$('#del_select').mouseenter(function () {
$(this).css("width","auto");
});
$('#del_select').mouseout(function () {
$(this).css("width","170px");
});
回答by anbi
Simply you can use this plugin for jquery ;)
只需将此插件用于 jquery ;)
http://plugins.jquery.com/project/skinner
http://plugins.jquery.com/project/skinner
$(function(){
$('.select1').skinner({'width':'200px'});
});
回答by TechSpud
Small, but hopefully useful update to the code from MainMa & user558204 (thanks guys), which removes the unnecessary each loop, stores a copy of $(this) in a variable in each event handler as it's used more than once, also combined the blur & change events as they had the same action.
来自 MainMa 和 user558204 的代码的小但希望有用的更新（谢谢大家），它删除了不必要的每个循环，将 $(this) 的副本存储在每个事件处理程序的变量中，因为它被多次使用，还结合了模糊和更改事件，因为它们具有相同的动作。
Yes, it's still not perfect as it resizes the select element, rather than just the drop-down options. But hey, it got me out of a pickle, I (very, very unfortunately) still have to support an IE6-dominant user base across the business.
是的，它仍然不完美，因为它调整了选择元素的大小，而不仅仅是下拉选项。但是，嘿，它让我摆脱了困境，我（非常非常不幸）仍然必须支持整个企业的 IE6 主导用户群。
// IE test from from: https://gist.github.com/527683
var ie = (function () {
var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
} ());
function badFixSelectBoxDataWidthIE() {
if (ie < 9) {
$('select').not('[multiple]')
.mousedown(function() {
var t = $(this);
if (t.css("width") != "auto") {
var width = t.width();
t.data("ow", t.css("width")).css("width", "auto");
// If the width is now less than before then undo
if (t.width() < width) {
t.unbind('mousedown');
t.css("width", t.data("ow"));
}
}
})
//blur or change if the user does change the value
.bind('blur change', function() {
var t = $(this);
t.css("width", t.data("ow"));
});
}
}
回答by PowerKiKi
A full fledged jQuery plugin is available, check out the demo page: http://powerkiki.github.com/ie_expand_select_width/
一个完整的 jQuery 插件可用，查看演示页面：http: //powerkiki.github.com/ie_expand_select_width/
disclaimer: I coded that thing, patches welcome
免责声明：我编码了那个东西，欢迎补丁
回答by Ben Sewards
Why would anyone want a mouse over event on a drop down list? Here's a way of manipulating IE8 for the way a drop down list should work:
为什么有人想要下拉列表中的鼠标悬停事件？这是一种操作 IE8 的方法，以实现下拉列表的工作方式：
First, let's make sure we are only passing our function in IE8:
首先，让我们确保我们只在 IE8 中传递我们的函数：
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Then, to allow the select to expand outside of the content area, let's wrap our drop down lists in div's with the correct structure, if not already, and then call the helper function:
然后，为了允许选择扩展到内容区域之外，让我们用正确的结构将下拉列表包装在 div 中，然后调用辅助函数：
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Now onto the events. Since IE8 throws an event after focusing in for whatever reason, IE will close the widget after rendering when trying to expand. The work around will be to bind to 'focusin'and 'focusout'a class that will auto expand based on the longest option text. Then, to ensure a constant min-width that doesn't shrink past the default value, we can obtain the current select list width, and set it to the drop down list min-width property on the 'onchange'binding:
现在进入事件。由于 IE8 无论出于何种原因聚焦后都会引发事件，因此 IE 会在尝试展开时在渲染后关闭小部件。解决方法是绑定到'focusin'和'focusout'一个将根据最长选项文本自动扩展的类。然后，为了确保一个恒定的 min-width 不会缩小超过默认值，我们可以获取当前选择列表宽度，并将其设置为'onchange'绑定上的下拉列表 min-width 属性：
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Lastly, make sure to add this class in the style sheet:
最后，确保在样式表中添加此类：
select:focus, select.expand {
width: auto;
}
回答by TheOnlyOne
I found a pretty straightforward fix for this. In the <select>html element add these properties:
我找到了一个非常简单的解决方法。在<select>html 元素中添加以下属性：
onmouseover="autoWidth(this)"
onblur="resetWidth(this)"
So whenever user clicks on that the width will automatically expand, and user moves out of the select box, the width will be reset to original.
因此，每当用户单击该宽度将自动扩展，并且用户移出选择框时，宽度将重置为原始宽度。
