JQueryモバイル折りたたみセットヘッダーが切り捨てられないようにする

Question

JQueryモバイルの折りたたみセットを使用しています。長いヘッダータイトルがモバイルデバイスで表示されているときに切り詰められています。

例えばヘッダはここで定義：

<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"> 
    ... 

がに切り捨ててしまう：他の記事のアドバイス次のテキストがたくさん 私のヘッダ...

は、私が試した：

を

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

...無駄に。私は望ましい効果を得るために.ui-collapsible-heading要素の子孫である.ui-btn-text要素をターゲットに

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

注意：ここで

Answer 1

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

これは、!importantを使わずにデフォルトのjQuery Mobileスタイリングを上書きする非常に特別なルールです。

ここはデモです：http://jsfiddle.net/JaPdC/