爲什麼我的標題文字被截斷？

我用jQuery移動與頭標記，看起來像這樣建立了一個網頁：爲什麼我的標題文字被截斷？

<div data-role="header"> 
    <h1>The Magnet Puzzle</h1> 
</div>

我測試了它在Android和Windows Phone和兩個截斷它的標題文本的最後三個字符，即使頭是足夠寬，以適應整個標題：

turncated header

我希望它看起來像這個：

full header text

爲什麼被截斷了，我怎麼能解決這個問題，以便它顯示了整個標題？

來源

2012-01-03 Peter Olson

你確定標題是足夠寬。你是否檢查過：'width'，'margin'和'padding'？ – PeeHaa 2012-01-03 20:54:28

@PeeHaa看看標題欄。看看文字的寬度。它看起來比標題更寬嗎？ – 2012-01-03 20:58:22

通過查看圖像很難看到'padding'：P – PeeHaa 2012-01-03 21:03:24

我認爲真正的麻煩在於JqMobile將左右邊距設置爲30％，只剩下標題總寬度的40％。把它改成10％，當你真的需要的時候你會得到省略號。

.ui-header .ui-title { 
    margin-right: 10%; 
    margin-left: 10%; 
}

來源

2012-11-16 17:09:09 bvs

不適合我 – Pitto 2013-07-03 16:04:23

謝謝，投票！ – Thomas 2013-07-12 15:02:07

他們爲什麼會將默認邊距設置爲30％？ – marcovtwout 2015-07-17 14:33:20

它被截斷因爲jQuery Mobile的CSS爲.ui-header .ui-title，這臺overflow到hidden的white-space到nowrap和text-overflow到ellipsis的。

我不知道是否有更好的方式來做到這一點，但是你可以重寫jQuery Mobile的CSS像這樣：

.ui-header .ui-title { 
    overflow: visible !important; 
    white-space: normal !important; 
}

This question has been asked before with the same answer.

來源

2012-01-03 20:56:04 Ivan

我希望我不必那樣做 – 2012-01-03 20:57:35

@PeterOlson：我更新了我的答案，並提供了一個關於jQuery Mobile標題的鏈接。 – Ivan 2012-01-03 21:01:05

這是用CSS來完成。

text-overflow: ellipsis;

從JqMobile CSS刪除此或用自己的覆蓋。

來源

2012-01-03 20:57:15 sascha

您的viewport元必須符合設備屏幕。添加到<head>：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

所有的細節和解釋在這裏：

Anatomy of a Jquery Mobile Page

來源

2013-01-21 22:36:30 Day

只是包裝你的<h1>在<div>：

<div data-role="header"> 
     <div><h1>The Magnet Puzzle</h1></div> 
    </div>

（然後用您的首選居中H1 CSSery）

來源

2013-03-21 23:26:32 Seanonymous

對不起，但標準佈局包括DIV + H1環繞和它截斷。這是「.ui-header .ui-title {margin-right：10％; margin-left：10％;}」樣式。 – 2015-07-03 19:51:56

我已經嘗試了所有建議的解決方案，總是失敗。

我可以解決編輯jquery.mobile-1.3.1.min.css的問題。

使用文本編輯器查找功能找到這個：

margin:.6em 30% .8em;

和評論吧：

/* margin:.6em 30% .8em; */

完全爲我工作的jQuery Mobile的1.3.1（本地使用，當然）。

來源

2013-07-03 16:32:42 Pitto

添加在您的文件

<style type="text/css"> 
    .ui-header .ui-title {margin: 0 20%} 
</style>

更改標題的默認保證金。

來源

2014-08-14 09:32:52 Pascal

我知道這是一個死線程但仍...

只需使用<p style="text-align:center">而不是<h1>，你應該罰款（僅適用於對話框）。

<div data-role="header"> 
    <p style="text-align:center">The Magnet Puzzle</p> 
</div>

來源

2016-05-16 11:04:37 AdharSri

爲什麼我的標題文字被截斷？

回答

相關問題