在 HTML 选择下拉选项中设置下拉元素的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1702186/
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
Set width of dropdown element in HTML select dropdown options
提问by Greg Zwaagstra
I am working on a website that involves automatically populating a select box using a PHP script. This all works fine except the problem is that what I am using to populate the text box have very long titles (they are journal articles and presentation titles). The dropdown box extends to the width of the longest element, which stretches off the edge of the screen, therefore making the scrollbar impossible to reach. I have tried various methods of trying to manually set the dropdown box using CSS to a particular width, but so far to no avail. The best I have accomplished it to set the Select box to a certain width but the dropdown menu itself is much, much wider.
我正在开发一个涉及使用 PHP 脚本自动填充选择框的网站。这一切都很好，但问题是我用来填充文本框的标题很长（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素超出屏幕边缘，因此无法到达滚动条。我尝试了各种尝试使用 CSS 将下拉框手动设置为特定宽度的方法，但到目前为止都无济于事。我所做的最好的事情是将选择框设置为一定的宽度，但下拉菜单本身要宽得多。
Any tips on this would be greatly appreciated.
对此的任何提示将不胜感激。
EDIT:
编辑：
It turns out that the following CSS line works in all of the primary browsers except for Google Chrome (which is what I was testing the page in). If a solution for Chrome is known, that would be good to know about.
事实证明，以下 CSS 行适用于除 Google Chrome 之外的所有主要浏览器（这是我测试页面的内容）。如果知道 Chrome 的解决方案，那将是一件好事。
select, option { width: __; }
采纳答案by Josh Leitzel
You can style (albeit with some constraints) the actual items themselves with the optionselector:
您可以使用option选择器为实际项目本身设置样式（尽管有一些限制）：
select, option { width: __; }
This way you are not only constraining the drop-down, but also all of its elements.
通过这种方式，您不仅可以限制下拉列表，还可以限制其所有元素。
回答by None
I find the best way to handle long dropdown boxes is to put it inside a fixed width div container and use width:auto on the select tag. Most browsers will contain the dropdown within the div, but when you click on it, it will expand to display the full option value. It does not work with IE explorer, but there is a fix (like is always needed with IE). Your code would look something like this.
我发现处理长下拉框的最佳方法是将它放在一个固定宽度的 div 容器中，并在 select 标签上使用 width:auto 。大多数浏览器将在 div 中包含下拉列表，但是当您单击它时，它会展开以显示完整的选项值。它不适用于 IE 资源管理器，但有一个修复程序（就像 IE 总是需要的那样）。您的代码看起来像这样。
HTML
HTML
<div class="dropdown_container">
<select class="my_dropdown" id="my_dropdown">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>
</div>
CSS
CSS
div.dropdown_container {
width:10px;
}
select.my_dropdown {
width:auto;
}
/*IE FIX */
select#my_dropdown {
width:100%;
}
select:focus#my_dropdown {
width:auto;
}
回答by anddoutoi
On the server-side:
在服务器端：
- Define a max length of the string
- Clipthe string
- (optional) append horizontal ellipsis
- 定义字符串的最大长度
- 剪辑字符串
- （可选）附加水平省略号
Alternative solution: the select element is in your case (only guessing) a single-choice form control and you could use a group of radio buttons instead. These you could then style with better control. If you have a select[@multiple] you could do the same with a group of checkboxes instead as they can both be seen as a multiple-choice form control.
替代解决方案：选择元素在您的情况下（仅猜测）是单选表单控件，您可以改用一组单选按钮。然后，您可以更好地控制这些样式。如果你有一个 select[@multiple] 你可以用一组复选框做同样的事情，因为它们都可以被看作是一个多选表单控件。
回答by David Olubaji
HTML:
HTML：
<select class="shortenedSelect">
<option value="0" disabled>Please select an item</option>
<option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>
CSS:
CSS：
.shortenedSelect {
max-width: 350px;
}
Javascript:
Javascript：
// Shorten select option text if it stretches beyond max-width of select element
$.each($('.shortenedSelect option'), function(key, optionElement) {
var curText = $(optionElement).text();
$(this).attr('title', curText);
// Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system.
var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3);
if (curText.length > lengthToShortenTo) {
$(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length));
}
});
// Show full name in tooltip after choosing an option
$('.shortenedSelect').change(function() {
$(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title')));
});
Works perfectly. I had the same issue myself. Check out this JSFiddle http://jsfiddle.net/jNWS6/426/
完美运行。我自己也有同样的问题。看看这个 JSFiddle http://jsfiddle.net/jNWS6/426/
回答by MRRaja
Small And Best One
小而优
#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">
回答by rydz
u can simply use "width" attribute of "style" to change the length of the dropdown box
您可以简单地使用“样式”的“宽度”属性来更改下拉框的长度
<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>
e.g.
例如
style="width:200px"
回答by Vishal Sharma
Small And Better One
小而优
var i = 0;
$("#container > option").each(function(){
if($(this).val().length > i) {
i = $(this).val().length;
console.log(i);
console.log($(this).val());
}
});
