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

我想限制下拉菜单中显示的菜单项的宽度。例如， 在这个演示链接中，

select

框的

width

是

150px

。但是，当我单击箭头时，菜单项显示在

150 px

之外，因为只有一项

“这是我的很长字符串”

如何将菜单项限制在150像素以内

编辑：下面是当前显示的内容。请注意，选项框如何滑出选择框的宽度。“这是我的很长字符串”将完全显示，但选项框将扩展到下拉选择框之外。

我需要的是下面这样的东西

---

请注意，尽管文本被截断，但选项框仍然与组合框对齐。此网站有各种不同的方法来解决您的问题

我想我在stackoverflow本身上发现了类似的问题。使用css应该可以解决您的问题

---

试试这段代码，它工作正常

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>

---

我们鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及它为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久脱机。感谢您的建议当我在fiddle演示中放入一个长字符串时，选项框将采用长字符串的宽度。但是我需要它被修复，你不能用一个标准做这件事，你需要自己滚动或者找到一个菜单插件，我在GitHub中找到了一些示例

       #wgtmsr{
       width:150px;   
        }

       #wgtmsr option{
         width:100px;   
         }