在HTMLselect下拉选项中设置下拉元素的宽度
我正在一个网站上工作，涉及使用PHP脚本自动填充select框。 这一切工作正常，除了问题是，我用来填充文本框有很长的标题（他们是期刊文章和演示文稿标题）。 下拉框延伸到最长元素的宽度，从屏幕的边缘伸展，因此使滚动条无法到达。 我尝试了各种方法试图手动设置下拉框使用CSS到一个特定的宽度，但到目前为止无济于事。 我已经完成了最好的设置select框到一定的宽度，但下拉菜单本身是很多，更广泛。
任何提示，将不胜感激。
编辑：
事实certificate，下面的CSS行可以在所有的主要浏览器中工作，除了Google Chrome浏览器（我正在testing页面）。 如果Chrome的解决scheme是已知的，这将是很好的了解。
select, option { width: __; } 您可以使用optionselect器来设置样式（虽然有一些限制）：
select, option { width: __; }
这样，你不仅限制了下拉，而且还限制了它的所有元素。
我发现处理长下拉框的最佳方法是将其放在一个固定宽度的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; }
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/
在服务器端：
- 定义string的最大长度
- 剪辑string
- （可选）附加水平省略号
另一种解决scheme：select元素是在你的情况下（只能猜测）一个单选表单控件，你可以使用一组单选button来代替。 这些你可以更好地控制风格。 如果你有一个select[@multiple]，你可以用一组checkbox来做同样的事情，因为它们都可以被看作是多选表单控件。
小和最好的一个
#test{ width: 202px; } <select id="test" size="1" name="mrraja">
你可以简单地使用“style”的“width”属性来改变下拉框的长度
<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"
小而美好的一个
var i = 0; $("#container > option").each(function(){ if($(this).val().length > i) { i = $(this).val().length; console.log(i); console.log($(this).val()); } });
