2014-02-19 59 views
6

我以前從未見過這樣(見於引導模板):什麼是css中的孤兒和寡婦?

p, 
    h2, 
    h3 { 
    orphans: 3; 
    widows: 3; 
    } 

那麼,什麼是孤兒和寡婦呢?

+4

一個簡單的谷歌搜索可以幫助你, –

+2

「簡單的谷歌搜索」現在返回結果的頂部附近這個問題! – Matt

回答

3

在排版,一個「寡婦」是出現在一個新的頁面開始一個段落的最後一行,而「趙氏孤兒」是出現一個段落的首行在一頁的結尾處。所以兩者都是通過分頁符與段落的其餘部分隔離的單行。他們被認爲是可以避免的,雖然意見不同意問題的嚴重性。

CSS概念是排版概念的概括,用「前幾行」替換「最後一行」和「第一行」。這些概括並不特別有用;在除段落其餘部分以外的頁面上放置兩段(或三段或......)行段通常沒有任何問題。

CSS屬性的definitions有些不自然,例如, orphans: 4並不意味着四個孤兒在任何地方。相反,它表示小於頁尾的段落的4行應被視爲孤兒並應予以避免。這種設置很難找到用途。

這兩個屬性的初始值是2,這意味着要避免單行孤兒和寡婦(即印刷意義上的孤兒和寡婦)。

那麼,爲什麼你會設置這些屬性?通常只有orphans: 1widows: 1或兩者兼有,以指定不需要避免排版孤兒或寡婦。即使對於這些用例也很難找到用例。

在討論的示例因而意味着一個分頁符可能不會出現一個ph2,或h3元件內部,除非其至少3條線出現在每一頁上。因此,一行5行可能不會被分成兩頁,而6行的段落可能僅被分成3行和3行。這聽起來毫無意義的過度。對於標題,它應該不會造成傷害,因爲標題通常適合於一行 - 但標題的設置是毫無意義的,因爲即使默認設置也可以防止2行或3行標題被打破(並且標題長度超過3行是確實是反常)。

2

moz.com

orphans: <integer> 
widows: <integer> 

這兩個屬性引用主要用於在頁面媒體通過指定段落中的線應在頂部(寡婦)或底部留下的數量(孤兒來控制換行)的一頁。

1

Widowsorphans是舊的打印術語,用於指定應分別出現在打印頁面的頂部和底部的文本的最小行數。 CSS2屬性可以完成同樣的任務,確保在每個頁面的頂部和底部顯示最少量的文本。

寡婦和孤兒屬性共享相同的值:一個整數值,用於指定在強制移動到另一個頁面之前必須出現在段落中的行數(單向或另一個)值繼承,它承擔可能已經設置的任何父值。寡婦和孤兒的默認數值爲2,確保段落中至少有兩行文字在分頁符出現之前位於頁面的頂部或底部。這些屬性僅用於塊級元素,如<p><div>

參考: - safaribooksonline.com