2

在我的 jQuery Mobile 页面上，我对一些按钮使用了水平控件组。但在某些语言中，这些按钮中的文本太长了。

不是将文本包裹在每个按钮中，而是按钮本身包裹到下一行。

问题截图

这是基本代码：

<div data-role="controlgroup" data-type="horizontal">
    <a href="#pageVertical" data-role="button">short button</a>
    <a href="#pageVertical" data-role="button">really really really insanely long button is really really insanely long. No really, who makes buttons this big?</a>
</div>

通过这个 css，我们说服它包裹在按钮内。否则，文本将被省略号截断

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

在这个小提琴的第三页上，问题被证明了 http://jsfiddle.net/koesper/R8Kwe/

任何人有任何想法我可以如何解决这个问题？

在此先感谢，卡斯帕

附言。原始修复的灵感来自于Jquery Mobile Multiline Button中的 Tosh

4

2 回答 2

4

您可以为控制组中的链接设置宽度：

.ui-page .ui-content .ui-controlgroup a {
    width : 49%;
}​

这将使它们保持在同一条线上。这是一个演示：http: //jsfiddle.net/R8Kwe/6/

另外，为了彻底起见，white-space : normal实际上需要将其应用于.ui-btn-text元素的子.ui-btn-inner元素（因此它仍然接收继承的值）。

于 2012-04-17T16:54:11.707 回答
0

修剪你的长按钮——这是一个可用性问题。如果您的操作按钮名称那么长，这似乎只是违背了操作的目的？除此之外，我不会将控制组用于这样的事情。我会使用自定义数据主题和一些网格来内嵌我的按钮。

于 2012-04-18T01:59:48.393 回答