2

考虑以下 jQuery Mobile 标记：

    <div data-role="collapsible">
      <h3 style="white-space:normal">This heading is not
wrapping even after "white-space:normal" style is applied</h3>
       <p>This content is wrapping without any problems</p>
     </div>

由于样式"white-space:normal"，标题应该换行，但它没有发生。

为什么会这样？

我可以做些什么来包装标题？

4

3 回答 3

4

从 1.4.3 版开始，您现在需要在 CSS 中执行以下操作：

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

我遇到了这个问题，这让我发疯了，因为网上所有的例子都是针对旧版本的 jQuery Mobile，而且显然 jQuery Mobile 的好人随着时间的推移改变了他们的类名。

于 2014-07-24T14:52:35.950 回答
1

..................................................... ......

习惯了这个

word-break:break-all

像这样

h3{
word-break:break-all;
}
于 2012-09-05T04:27:24.167 回答
0

在 jquerymobile 有其方式之后，h3 的实际文本并不直接位于 h3 标记内。答案是在 ui-btn-text 类上使用 css。因此，如果您想为由 h3 标签制成的按钮实现它：

<style>
h3 .ui-btn-text{ white-space:normal; word-break:break-all; }
</style>

jquerymobile 加载后的 h3 标签的 html 如下所示：

<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
    <a href="#" ...>
        <span class="ui-btn-inner">
            <span class="ui-btn-text">The actual h3 text
                <span class="ui-collapsible-heading-status"> click to expand contents</span>
            </span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
       </span>
    </a>
</h3>
于 2013-11-20T15:58:36.773 回答