Html 使f:selectItem的宽度与其p:SelectOne菜单相同，并将f:selectItem换行

我正试图通过我的

selectOneMenu

实现这些目标：

• 使

  f:selectItem

  的宽度适应其

  p:selectOneMenu

• 如果

  项目标签

  太长，请包装

  f:selectItem

  的文本
• 将剩余文本隐藏在

  p:selectOneMenu

  中，且不要重叠

我尝试了几种解决办法，但都没有成功。我希望你们能帮助我

这是我的HTML：

<p:panelGrid class="input-form" columns="2" layout="grid" style="width: 100%;">
<h:outputLabel styleClass="input-label hidden-sm" value="Register by :" style="font-weight:bold" />
<p:selectOneMenu style="width:100%;">
    <f:selectItem itemLabel="Savings Account Number" itemValue="Savings Account Number"/>
    <f:selectItem itemLabel="Mobile Number Registered in XYZ" itemValue="Mobile Number Registered in XYZ"/>
    <f:selectItem itemLabel="Special Card" itemValue="Special Card"/>
    <f:selectItem itemLabel="Employer / Household Employer ID Number" itemValue="Employer / Household Employer ID Number"/>
    <f:selectItem itemLabel="Payment Reference / XYZ / Payment Receipt Transaction Number" itemValue="Payment Reference / XYZ / Payment Receipt Transaction Number"/>
</p:selectOneMenu>

我正在使用Primefaces Avalon主题

供参考的图像：

---

项目列表位于一个单独的div中，带有class ui SelectOne菜单面板。此面板具有宽度、顶部和左侧的内联样式。我想，你不能设计这个盒子。你好@Holger。当我检查元素时，selectItem的类如下所示：ui SelectOne菜单面板ui小部件ui小部件内容ui角落所有ui帮助程序隐藏ui阴影ui输入覆盖。SelectItem是否真的不可能调整selectOneMenu的宽度？通常情况下，宽度是调整的。SelectOneMenu随使用的selectItems而增长。但是，如果SelectOneMenu由于外部框的原因无法再增长，面板就会增长。如您所见，ui SelectOne菜单面板位于文档底部。在任何桌子或面板外。

body .ui-selectonemenu {
overflow:auto; 
white-space:pre; 
text-overflow:ellipsis;
-webkit-appearance: none;
background: #ffffff;
border: 1px solid #cccccc;
-moz-transition: border-color 0.3s, box-shadow 0.3s;
-o-transition: border-color 0.3s, box-shadow 0.3s;
-webkit-transition: border-color 0.3s, box-shadow 0.3s;
transition: border-color 0.3s, box-shadow 0.3s; }
body .ui-selectonemenu .ui-selectonemenu-label {
color: #212529;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none; }