iOS Safari縮短文本的跨度縮進段落

我正在嘗試使用自定義文本的垂直縮進來創建段落。iOS Safari縮短文本的跨度縮進段落

的CSS和HTML是：

/* HANGING INDENT */ 
 
p{padding-left:6em;text-indent:-6em;} 
 
/* INLINE-BLOCK SPAN SO MAIN TEXT STARTS AT 6EM */ 
 
p>span:first-child{display:inline-block;width:6em;text-indent:0em;text-align:left;}

<p><span>Hanging</span>Other text on line. This is filler text to force a second line. This is filler text to force a second line. This is filler text to force a second line.</p>

全部是IE，Chrome和三星瀏覽器還好，但iOS版（9.0.2）的Safari收縮掛文本。

如果CSS 跨度顯示：內聯塊被去除時，文本返回到正常的尺寸，但跨度恢復到內聯，所以寬度：6EM被忽略，使文本到對接的其餘部分反對掛文本。

如果CSS p TEXT-INDENT：-6em被刪除，掛文本恢復到正常大小，但它不再掛起！

任何人都知道我可以如何讓它工作，同時保持簡單？也就是說，沒有瀏覽器專用的墊片或js。

本來，試了一下如下：

/* INDENT PARAGRAPH */ 
 
p{position:relative;margin-left:6em;} 
 
/* OUTDENT SPAN */ 
 
p>span:first-child{position:absolute;left:-6em;}

<p><span>Hanging</span>Other text on line. This is filler text to force a second line. This is filler text to force a second line. This is filler text to force a second line.</p>

然而，iOS版不僅縮小了文本，但也提出了它超級喜歡，並沒有垂直對齊設置可以改變它！

來源

2015-10-04 Patanjali

我發現一個解決方案，同時試圖解決爲什麼Safari在iOS 9.0.2會超過普通p標籤內的所有文本，同時將其他標籤內的所有其他文本保留在正確的大小。這會讓頁面看起來很奇怪 - 標題小於文本 - 儘管我懷疑這是爲了讓它們更具可讀性。現在

，而我說我不想瀏覽器嗅探，我確實有一些全局CSS來製作的iOS的Safari網頁縮小到75％的肖像，這樣有至少每行一些文字：

@media screen and (max-width:320px){body{-webkit-text-size-adjust:75%;}}

到我的兩個問題，解決的辦法是添加另一條線作出任何屏幕寬度大於320像素（如橫向）使用100％（注意，「無」沒有工作）：

@media screen and (min-width:321px){body{-webkit-text-size-adjust:100%;}}

注意：這適用於縮進的變體： a）使用填充和文本縮進。 b）使用位置。

個人而言，我更喜歡位置變體，因爲它更清潔。文本縮進CSS是由所有的孩子繼承的，所以必須小心放置文本縮進：0em;在CSS的子元素，這只是凌亂。

來源

2015-10-18 17:08:14 Patanjali

iOS Safari縮短文本的跨度縮進段落

回答

相關問題