Question

我正在开发一个网站，该网站涉及使用PHP脚本自动填充选择框。这一切都很好，除了问题是我用来填充文本框的内容有很长的标题（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素延伸到屏幕边缘，因此无法触及滚动条。我尝试过各种方法尝试使用CSS手动设置下拉框到特定宽度，但到目前为止无济于事。我已经完成了将选择框设置为特定宽度的最佳效果，但下拉菜单本身要宽得多。

对此的任何提示将不胜感激。

修改

事实证明，以下CSS系列适用于除Chrome浏览器之外的所有主要浏览器（我正在测试该页面）。如果知道Chrome的解决方案，那么最好了解一下。

select, option { width: __; }

Answer 1

我发现处理长下拉框的最佳方法是将其放在固定宽度的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;
}

Answer 2

您可以使用option选择器设置实际项目（虽然有一些约束）：

select, option { width: __; }

这样，您不仅可以限制下拉列表，还可以限制其所有元素。

Answer 3

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/

Answer 4

在服务器端：

定义字符串的最大长度
Clip字符串
（可选）附加水平省略号

替代解决方案：select元素在您的情况下（仅猜测）单选表单控件，您可以使用一组单选按钮。然后你可以通过更好的控制来设计。如果您有一个选择[@multiple]，您可以使用一组复选框执行相同操作，因为它们都可以被视为多选表单控件。

Answer 5

Small and Best One

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">

Answer 6

你可以简单地使用＆＃34; width＆＃34; ＆＃34; style＆＃34;的属性更改下拉框的长度

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

Answer 7

小而好的

var i = 0;
$("#container > option").each(function(){ 
    if($(this).val().length > i) {
        i = $(this).val().length;

        console.log(i);
        console.log($(this).val());
    }
});

在HTML选择下拉选项中设置下拉元素的宽度

7 个答案: