html - 如何在 HTML for mobile 的下拉列表选项中启用自动换行？

Question

我有一个用 HTML 创建的下拉列表，其中包含多个选项。该下拉列表具有非常冗长的选项。因此，当我尝试在移动设备中查看该下拉列表时，该选项被截断了。那么我怎样才能将它们包裹到下一行呢？

下面是我的代码:

<select id="secretques" name="secretques" class="wide100">
                  <option value="">-----------------SELECT-----------</option>
                  <option value="A1">What was the first concert you attended?</option>
                  <option value="A2">What was the name of your first pet?</option>
                  <option value="A3">What street did you live on in third grade?</option>
                  <option value="A4">What school did you attend when 10 years old?</option>
                  <option value="A5">What was last name of your first grade teacher?</option>
                  <option value="A6">What is the name of city where your parents met?</option>
                  <option value="A7">What is your maternal grandmother's maiden name?</option>
                  <option value="B1>(BUSINESS CUST ONLY) WHAT IS YOUR SECRET CODE?</option>
                  <option value="Q1">What is your favorite food or drink?</option>
                  <option value="Q2">Who was your favorite teacher?</option>
                  <option value="Q3">What is the name of your favorite restaurant?</option>
                  <option value="Q4">What was the name of your childhood pet?</option>
                  <option value="Q5">What is your favorite sport or hobby?</option>
                  <option value="Q6">Where was your mother born?</option>
                  <option value="Q7">What was the name of the 1st school you went to?</option>
   </select>

下面是它的截图:

下拉列表

任何帮助将不胜感激...

---

编辑:1 根据评论中的建议，我尝试使用 select2 插件。

我已经从 github 下载了“select2-4.0.3”包。 并在我的元素中导入 CSS 文件 select2.css (select2-4.0.3\select2-4.0.3\dist\css\select2.css)。

我也导入了 JS 文件 select2.js (\select2-4.0.3\select2-4.0.3\dist\js)。 然后我将以下代码放入我的 javascript 文件中:

$(function() {
    $('.select2').select2({
        dropdownAutoWidth: true
    });
});

我还在下拉列表(html 文件)中添加了“select2”类，如下所示:

<select id="secretques" name="secretques" class="wide100 select2">
</select>

但是 select2 的 css 类都没有渲染。有人能告诉我为什么它不适合我吗？

Answer 1

添加一个空的optgroup

<optgroup label=""></optgroup>

以某种方式使移动浏览器适合文本.. 但是您确实会在下拉菜单的底部看到一个空行

所以你可以用一点CSS来解决这个问题

<optgroup style="display:none" label=""></optgroup>

看看你是怎么处理的