当选择选项超过最大宽度时，如何使选择选项换行？

Question

例如，我有这样的事情：

通过以下 HTML 代码，我将整个下拉列表的最大宽度设置为 80%，我希望这会影响每个选项。

我希望拥有它，以便长选项在最大点处环绕：

红线表示什么被视为“一个选项”，因此当我将鼠标悬停在其上时，应选择红线之间的所有内容

<select name=countries style="width:100%;max-width:30%;">
    <option value=gs selected="selected">All</option>
    <option value=gs>This is fine</option>
    <option value=gs>This message should wrap because it is very long</option>
    <optgroup label="Title">
        <option value="optcheck">Option groups are long, so they should wrap too</option>
    </optgroup>
</select>

https://jsfiddle.net/pxl70474/x7w85fnm/

Answer 1

如果您使用的是 bootstrap，则可以将 bootstrap selectpicker 类与 data-content 属性一起使用。

 <select class="selectpicker form-control" data-live-search="true" 
     id="subject_teacher_drop_down">
   <option data-content="English" title="English">English</option>
   <option data-content="Methodology of social..."  title="Methodology of social science 
     with special reference to economics">
     Methodology of social science with special reference to economics
   </option>
 </select>