Jquery手機標頭鏈接與長文本重疊

我剛開始使用jquery移動應用程序，並且在使用鏈接時遇到標題欄問題。Jquery手機標頭鏈接與長文本重疊

<header data-role="header" data-position="fixed"> 
    <a href="blah" data-icon="back">this is long text</a> 
    <h1>page title</h1> 
    </header>

問題是後鏈接經常與標題重疊，如果其中一個或兩個都有點長。這顯然只發生在具有較小屏幕的移動設備（vs iPad）上或當我縮小我的測試瀏覽器時的視圖。但在更廣泛的瀏覽器上測試時，它看起來不錯。有沒有建立jQuery的方式來完成這項工作？通過縮小文本大小還是根據寬度自動截斷文本？我可以自己截斷文本，但在更廣泛的瀏覽器（或橫向模式）中查看時看起來很傻，並且鏈接無故被截斷。

任何幫助將是偉大的。謝謝！

UPDATE：

您可以將http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html

使用Firebug /檢查員以使文本在任何工具欄鏈接較長的，看着他們重疊的標題時，瀏覽器是在一個較小的測試此寬度。

來源

2011-07-19 Danny

可能會嘗試jquery-collision來檢測它們何時重疊並將元素重新調整爲較小的視點。 http://sourceforge.net/apps/mediawiki/jquerycollision/index.php?title=Main_Page –

這已在stackoverflow上討論過。下面的鏈接顯示許多不同的策略用於截斷長字符串：

Truncating long strings with CSS: feasible yet?

來源

2011-07-19 15:55:07 Jasper

我希望能爲jquery mobile提供更多更新和特定的內容。這些想法是行不通的，因爲jquery mobile以絕對定位實現了頭部周圍的這些鏈接，所以它不認爲它溢出任何東西。 – Danny

JQuery Mobile樣式添加跨度來創建鏈接按鈕。您可以在想要更改的鏈接中使用正確的類別來定位跨度。這裏是一個示例選擇器：'#link_id span.ui-btn-text' – Jasper

我明白了，但我怎麼不認爲這個鏈接中的任何方法在這裏都有幫助。 css3溢出屬性將不起作用，因爲文本週圍的所有元素都是絕對定位的，所以他們認爲它們不會溢出任何東西。定位鏈接，跨度或任何其他周邊元素都無濟於事。 – Danny

有一些事情你可以試試。

<header data-role="header" data-position="fixed">

「header」和「data-role =」header「」可能相互衝突。嘗試使它成爲一個div

此外，如果您使用任何css風格這些標題嘗試使用百分比和ems高度。這將確保頭看起來幾乎相同的每個移動瀏覽器（雖然有些不使它看起來不同，像歌劇牧高笛爲例）

下面是一個例子：

.ui-header .ui-title, .ui-footer .ui-title { 
    display: block; 
    font-size: 1em; //Font size is a height, use ems 
    margin: 0.6em 90px 0.8em; 
    outline: 0 none !important; 
    width: 50%; //For widths use % 
}

如果還是不行工作，然後嘗試爲標題中的每個元素指定一個特定的height。對於某些手機（尤其是iPhone），如果未指定特定高度，這些div將重疊或被切斷。

<a href="blah" data-icon="back" id = "link">this is long text</a> 
<h1>page title</h1> 

#link 
{ 
    height: 10px; //(Or you can use ems, but this may not be needed) 
}

如果這樣不能解決問題，那麼您可能只需要減小字體大小。這是手機的問題，特別是與jQuery Mobile的，它不支持大部分手機（HTC，黑莓，ECT都有一些小的問題，這樣，你可能會遇到）

編輯還有一注意：如果您嘗試覆蓋JQuery Mobile css而不是嘗試應用您自己的，通常效果會更好。我的意思是：

<header data-role="header" data-position="fixed" id ="header"> 

.ui-header { 
//CSS 
}

通常會更好地工作比

#header { 
    /CSS 
}

來源

2011-07-19 18:12:55

我長的標題和按鈕的碰撞也遇到了問題。默認情況下，標題以標題的整個寬度爲中心，並且按鈕絕對位於兩側。

我解決這個問題的方法是做如下調整後的jQuery Mobile的加載在我的樣式表中的CSS：

.ui-header { 
    display: table; 
    width: 100%; 
} 

.ui-header .ui-title { 
    display: table-cell; 
    width: 100%; 
    line-height: 2.5em; 
} 

.ui-header .ui-btn { 
    display: table-cell; 
} 

.ui-header .ui-btn-left, .ui-header .ui-btn-right { 
    position: static; 
    top: 0; 
}

這中心在頭按鈕後稱號的空間。 Here's a demonstration of the normal behavior和here's an example with the above fix applied。要查看差異，請調整瀏覽器/視圖的大小。我知道在IE 7中不支持display：{table | table-cell}。

來源

2012-11-13 16:07:21 OxC0FFEE

這是朝正確方向邁出的一步，但它不是一個完美的解決方案。在我的瀏覽器中，修復程序的示例有一個變形的按鈕，並在其後面有另一個按鈕的輪廓。我很想找到一個解決方案，截斷按鈕標籤，並添加一個省略號，如果按鈕超過指定的大小（百分比，像素數量等），而不改變工具欄的外觀。同樣，我想將省略號的截斷應用於標題和右側按鈕。 –

Jquery手機標頭鏈接與長文本重疊

回答

相關問題