在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/

在服务器端:

  1. 定义string的最大长度
  2. 剪辑string
  3. (可选)附加水平省略号

另一种解决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()); } });