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

Jquery移动多线按钮

2 个答案: