jQuery Mobile多行按钮

Question

我该如何将此按钮设置为多行显示？

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

- Christophe Debove

Answer 1

上面由 ppshein 给出的答案是不正确的。它只会使按钮变大，但不会使按钮多行显示。您需要做的唯一事情就是添加以下 CSS：

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

它适用于按钮和输入标签。另外，IE存在一个bug：按钮中的文本无法点击。解决方法可以在Github上找到：https://github.com/timmywil/jquery-mobile/commit/59a4946d776e9b1f6a75e9eb53ccb38347612125。

- Tosh

---

我已经编辑了我的回答，IE浏览器中有一个错误，你可能需要修复。 - Tosh

好的，但是我正在开发的网站是为移动设备设计的，所以我最终可以说我不在乎IE了，不过还是谢谢。 - Christophe Debove

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;}

您可以访问我的博客了解详情

如何在jQueryMobile中制作正方形按钮

- PPShein

---

好的，我有一个多行布局（正方形），但我的文本不会换行。 - Christophe Debove

我不明白为什么要在多行文本中使用text-overflow: ellipsis;，因为这似乎是不合逻辑的。 - Christophe Debove