阻止JQuery Mobile可摺疊設置標題被截斷

我正在使用JQuery mobile的可摺疊設置，當在移動設備上查看時，我的長標題標題被截斷（並且無法讀取）。阻止JQuery Mobile可摺疊設置標題被截斷

例如頭定義如下：

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

...無濟於事。

來源

2012-04-20 Allyl Isocyanate

這是必要的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-20 22:05:29 Jasper

完美，你搖滾賈斯珀！ – 2012-04-23 01:12:17

僅供參考，這在Chrome中運行良好，但似乎不適用於iPhone中的Safari webkit。調查爲什麼這是這種情況 – 2012-04-23 15:52:18

你嘗試過使用'！important'嗎？ – Jasper 2012-04-23 16:16:39

阻止JQuery Mobile可摺疊設置標題被截斷

回答

相關問題