Делаем f: selectItem шириной, равной его p: selectOneMenu и переносим f: selectItem

Question

Я пытаюсь достичь этих целей с помощью моего selectOneMenu:

• Сделайте ширину f:selectItem, чтобы адаптировать ее размер p:selectOneMenu
• ОбернитеТекст f:selectItem, если itemLabel слишком длинный
• Скрыть оставшийся текст внутри 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>

А это мой CSS:

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; }

IЯ использую Primefaces Avalon Theme .

Изображения для справки: