如何使用 jQuery Mobile 创建可自动调整大小的按钮和文本？

Question

我正在尝试使用 phonegap 和 jQuery Mobile 创建一个 android 移动应用程序。我已经创建了我的应用程序的界面，创建了一些按钮和其他一些基本内容。这完美地遇到了 android。界面，按钮在我的选项卡中都很好。但是当我将它安装到另一个屏幕尺寸较小的 android 设备时，界面变得很尴尬。按钮大小都可以，所有按钮的高度和宽度都相同，但按钮文本不适合按钮宽度。较长的文本不会完整显示。显示一些字符后，其他字符在“...”下，如-"Digital Ce..." 这是屏幕截图-

但是我希望界面是这样的-

我希望按钮文本根据按钮宽度调整大小，按钮高度可能会自动扩展以容纳全文。

我将网格按钮编码如下：

<div class="ui-grid-b my-breakpoint">
  <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</button></div>
  <div class="ui-block-b"><button type="button" data-theme="c"> <img src="res/icon/android/digital_center.png" height="45"><br>Digital Center</button></div> 
  <div class="ui-block-c"><button type="button" data-theme="c"> <img src="res/icon/android/employment.png" height="45"><br>Employment</button></div>     
</div>

其他页面的其他按钮也会出现此问题：

下面是这些按钮的代码：

    <form action="http://www.frs-bd.com/">
        <input data-icon="arrow-r" data-iconpos="right" type="submit" value="Fertilizer Recommendation">
    </form>

    <form action="http://www.knowledgebank-brri.org/">
        <input data-icon="arrow-r" data-iconpos="right" type="submit" value="Bangladesh Rice Knowledge Bank">
    </form>

    <form action="http://www.frs-bd.com/">
        <input data-icon="arrow-r" data-iconpos="right" type="submit" value="Fertilizer Recommendation">
    </form>

现在我该如何解决？如何使按钮文本根据按钮宽度自动调整大小？

Answer 1

.ui-btn {  
    white-space: normal !important;
}

FIDDLE

如何使用 jQuery Mobile 创建可自动调整大小的按钮和文本？

How do I create auto resizeable button and text using jQuery Mobile?

html

jquery

jquery-ui

jquery-mobile

phonegap-build