Question

考虑以下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"，标题应该换行，但它没有发生。

为什么会这样？

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

Answer 1

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

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

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

Answer 2

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

习惯了这个

word-break:break-all

就像这样

h3{
word-break:break-all;
}

Answer 3

在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>

在jQuery Mobile中包装可折叠

3 个答案: