jQuery Mobile：垂直控制组中的多行按钮

Question

在我的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/

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

提前致谢， 卡斯帕

PS。原始修复的灵感来自于Jquery Mobile Multiline Button

中的Tosh

Answer 1

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

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

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

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

Answer 2

修剪你的长按钮 - 这是一个可用性问题。如果你有一个名为long的动作按钮似乎只是违背了动作的目的？除此之外，我不会使用控制组来做这样的事情。我会使用自定义数据主题＆amp;一些网格用于内嵌我的按钮。