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>

style により見出しが折り返されるはずですが、折り返されて"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

h3 の実際のテキストは、jquerymobile が独自の方法を採用した後、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 に答える