下拉列表 - 限制所有菜单项的宽度

Question

我想限制下拉列表中显示的菜单项的宽度。例如， 在此演示链接http://jsfiddle.net/B3uSD/1690/中，width框的select为150px。然而，当我点击箭头时，菜单项显示在150 px之后，因为只有一个项目"This is my very long string"。

如何限制菜单项以适应150像素？

编辑：以下是目前显示的内容。注意选项框如何超出选择框的宽度。 “这是我的非常长的字符串”完全显示，但选项框扩展超出下拉选择框。

我需要的是下面的内容

请注意，尽管文本被截断，但选项框仍然与组合框

对齐

Answer 1

本网站有各种不同的方法来解决您的问题 Controlling the width of SELECT lists

我认为我在stackoverflow本身发现了一些类似的问题。使用CSS可以解决您的问题 How can change width of dropdown list?

Answer 2

试试这段代码它的工作正常。

HTML： -

  <select name="wgtmsr" id="wgtmsr">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
 </select>

CSS： -

       #wgtmsr{
       width:150px;   
        }

       #wgtmsr option{
         width:100px;   
         }

Check JSFiddle Demo