如何根据所选选项控制jquery mobile选择菜单标题的宽度答案

【问题标题】：How to control the width of jquery mobile select menu header based on selected option如何根据所选选项控制jquery mobile选择菜单标题的宽度
【发布时间】：2014-07-31 00:04:07
【问题描述】：

我正在为我的网络应用程序使用 Jquery Mobile 1.2.0 Alpha。我正在使用 JQM 选择下拉菜单来填充时区选项列表。对于小的选项文本，JQM 根据设备屏幕大小调整选择菜单标题以及其他字段宽度。但是对于较大的选项文本，选择菜单标题会变得太宽，超出屏幕大小，还会破坏其他字段的宽度。

我尝试设置最小宽度和最大宽度来选择菜单标题，但它不起作用。我在此处添加了屏幕截图以供参考。

<select id="TimeZoneId" name="TimeZoneId" data-mini="true">

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

聚会迟到了，但这也可以解决自动换行问题。 (jQuery Mobile 版本 1.4.3)

CSS：

.ui-select .ui-btn>span:not(.ui-li-count) {
    white-space: normal !important;
}

【讨论】：

【解决方案2】：

使用目标元素，并将其添加到您的 CSS 文件中：

#TimeZoneId {
     white-space:normal !important
}

这应该使文本换行

【讨论】：

是的，我试过了，但是在 jquery mobile 中，通过直接在目标元素中添加空格它不起作用。但是通过将它包装在 div 中并使用该 id，它就可以工作了。我通过添加 $('#dropdown-list').find('span').each(function () { $(this).css("white-space", "normal"); });