2

I'm using JQuery mobile's collapsible set, and my long header titles are being truncated (and made unreadable) when viewed on mobile devices.

For example the header defined here:

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>My header with lots of text that gets truncated when viewing on mobile device or small screen.</h3>
    <fieldset data-role="controlgroup">
    ...

Ends up being truncated to: My header with lots of text...

Following the advice of other posts, I tried:

<style type="text/css">
  .ui-header .ui-title .ui-btn-text .ui-collapsible-heading {
    overflow: visible !important;
    white-space: normal !important;
  }
</style>

...to no avail.

4

1 に答える 1

7

折りたたみ可能なセットのタイトルを複数行にするために必要な CSS は次のとおりです。

.ui-mobile .ui-page .ui-content .ui-collapsible .ui-collapsible-heading .ui-btn-text {
    white-space : normal;
}​

目的の効果を得るために、要素.ui-btn-textの子孫である要素をターゲットにしていることに注意してください。.ui-collapsible-heading

これにより、 を使用せずにデフォルトの jQuery Mobile スタイルを上書きする非常に具体的なルールが作成されます!important。

ここにデモがあります：http://jsfiddle.net/JaPdC/

于 2012-04-20T22:05:29.570 に答える