jQuery Mobile - 工具欄Elipse在iPad中

我使用jQuery Mobile在iPad應用程序中本地呈現HTML。即使有很多空間，標題中也會顯示「......」的縮略圖。我正在使用現成的JQM和JQM CSS類。jQuery Mobile - 工具欄Elipse在iPad中

如何讓JQM呈現完整標題？

下面是一些藍色標記的屏幕截圖。

這裏的標題：

`<div data-role='header' data-position='inline'> 
     <h1>the long title goes here</h1></div>`

enter image description here

來源

2012-03-30 BahaiResearch.com

土地是否使用煎茶嗎？ – codaniel 2012-03-30 21:29:09

不，我們使用MonoTouch – 2012-03-31 04:41:45

的h1標籤獲取邊緣塗敷，您可以覆蓋等多項稱號將不會裁剪這麼多。

.ui-page .ui-header h1 { 
    margin-left : 0; 
    margin-right : 0; 
}

這裏是一個演示：http://jsfiddle.net/ubYWU/

注意，你會想給left/rightmargin值，它使得你的標題不會與你的圖標（S）重疊。

來源

2012-03-30 21:20:55 Jasper

設置溢出的組合：隱藏和文本溢出：省略號是什麼導致重寫ui標題，然後播放邊距嘗試和居中。他們可能包括這個爲頁眉和頁腳中的按鈕留出空間。試試這個：

.ui-header .ui-title, .ui-footer .ui-title { 
    overflow:visible; 
    margin: .6em 20%; 
}

爲此，JQM 1.1-RC1的默認左右頁邊距被設置爲30％。只需調整它，直到它適合您的需求。

更新：我添加了使用30％默認值的版本。謝謝賈斯帕。

來源

2012-03-30 21:27:45 codaniel

jQuery Mobile 1.0.1和更早版本聲明這個CSS爲'.ui-title'：'margin：.6em 90px .8em;'。 jQuery Mobile 1.1.0 RC-1是爲'left' /'right'' margin'屬性使用'30％'的第一個里程碑。您可以通過查看每個版本的文檔來查看。 – Jasper 2012-03-30 21:43:34

同樣重要的是要注意，你應該「線高度：」添加到您的元素，因此如果他們換，他們不會在上面對方2號線

來源

2012-03-31 00:43:32 imaginethepoet

jQuery Mobile - 工具欄Elipse在iPad中

回答

相關問題