自动增加selectOneMenu选项宽度？

Question

当我保存任何名字很长的数据时，我需要允许我的Dropdown SubMenu自动增加它的宽度。下拉框可以自我调整以响应我当前的代码。 （如下图所示）
P / S：我的下拉列表必须适用于Chrome和Firefox。

我尝试了很多方法来解决它，但我还是坚持了下来。我可以知道使用CSS解决这个问题的其他方法吗？ 我尝试将浮动更改为float: left，但这对我来说不正确，因为我不想使用从左到右的滚动条。

对于子菜单，如果其中的数据非常长，则子菜单的对齐方式与主菜单不对齐并不重要。我需要的是自动宽度增量。

以下是我的代码：

.ui-selectonemenu .ui-selectonemenu-label {
   background: #c9e9e2 !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
   background: #c9e9e2 !important;
   -webkit-padding-end: 0px !important;   
   float: right;
   position: relative;
   display: inline-block;
   -webkit-column-width: 150px !important; /*words inside dropdown*/

   /*For Firefox*/
   -moz-column-width: 158px !important; 
}

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
   background:#FFFFFF !important; 
   text-shadow: none;
   color: #444444;    
}

.selectOneMenu {
   color: #444444;
   font-size: 11px;
   font-family: Verdana;
   font-weight: 400;
   height: 21px;
   width: 158px !important;
}

从图片中可以看出，每个单词的所有第一个字母都被剪掉了。

Answer 1

jQuery可能会有帮助，使用if语句，你可以拥有它，所以如果下拉菜单中单个列的字符串长度超过一定量，下拉菜单会自动增加其宽度。