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