我正在开发一个涉及使用 PHP 脚本自动填充选择框的网站。这一切都很好，除了问题是我用来填充文本框的标题很长（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素延伸到屏幕边缘，因此无法触及滚动条。我尝试了各种尝试使用 CSS 手动将下拉框设置为特定宽度的方法，但到目前为止无济于事。最好的方法是将选择框设置为一定的宽度，但下拉菜单本身要宽得多。
对此的任何提示将不胜感激。
编辑：
事实证明，以下 CSS 行适用于除 Google Chrome 之外的所有主要浏览器（我在其中测试页面）。如果已知 Chrome 的解决方案，那就太好了。
select, option { width: __; }
【问题讨论】：
标签： html css html-select
小巧玲珑
var i = 0;
$("#container > option").each(function(){
if($(this).val().length > i) {
i = $(this).val().length;
console.log(i);
console.log($(this).val());
}
});
【讨论】：
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：
.shortenedSelect {
max-width: 350px;
}
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')));
});
完美运行。我自己也有同样的问题。看看这个 JSFiddle http://jsfiddle.net/jNWS6/426/
【讨论】：
你可以简单地使用“样式”的“宽度”属性来改变下拉框的长度
<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>
例如
style="width:200px"
【讨论】：
小巧玲珑
#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">
【讨论】：
我发现处理长下拉框的最佳方法是将其放在固定宽度的 div 容器中，并在 select 标签上使用 width:auto。大多数浏览器都会在 div 中包含下拉菜单，但是当您单击它时，它会展开以显示完整的选项值。它不适用于 IE 资源管理器，但有一个修复程序（就像 IE 总是需要的那样）。您的代码看起来像这样。
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
div.dropdown_container {
width:10px;
}
select.my_dropdown {
width:auto;
}
/*IE FIX */
select#my_dropdown {
width:100%;
}
select:focus#my_dropdown {
width:auto\9;
}
【讨论】：
width:100%
在服务器端：
替代解决方案：在您的情况下（仅猜测）选择元素是一个单选表单控件，您可以使用一组单选按钮。然后，您可以更好地控制这些样式。如果你有一个 select[@multiple] 你可以用一组复选框来做同样的事情，因为它们都可以被视为一个多选表单控件。
【讨论】：
您可以使用option 选择器自己设置实际项目的样式（尽管有一些限制）：
select, option { width: __; }
这样，您不仅可以限制下拉菜单，还可以限制其所有元素。
【讨论】：