Jquery Mobile Multiline Button

Question

如何設置此按鈕多行？

<a style="width:33%; display:inline-block; " href="/foos.html" data-role="button" data-icon="arrow-l">a lot of text </a> 

Answer 1

通過ppshein給出不正確，以上回答。它使一個更大的按鈕，但不使按鈕多線。您需要做的唯一的事情就是添加以下css：

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

它既適用於按鈕又適用於輸入標籤。

順便說一句，IE有一個錯誤：按鈕中的文本是不可點擊的。此修復程序是在github上發現：

https://github.com/timmywil/jquery-mobile/commit/59a4946d776e9b1f6a75e9eb53ccb38347612125

Answer 2

很簡單。如下更改現有的.ui-btn-inner類。

.ui-btn-inner { 
    padding: 2em; 
    display: block; 
    height: 100%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    position: relative; 
} 

後，改變現有二級如下

<!--- add it after .ui-select ---> 
.ui-select .ui-btn-inner {padding: .6em;} 

<!--- add it after .ui-checkbox ---> 
.ui-checkbox .ui-btn-inner {padding: .6em;} 

您可以訪問我的博客查看詳細

How to make square shape button in jQueryMobile